/**
 * BE Gradient Button – widget styles
 *
 * Uses @property for the animating conic-gradient angle.
 * All tuneable values are driven by CSS custom properties
 * set via Elementor selectors, so the inline <style> block
 * is no longer needed in the PHP render() method.
 */

/* ── Animating angle property ───────────────────────────────── */
@property --be-btn-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: true;
}

/* ── Wrapper (handles text-align / alignment control) ────────── */
.be-gradient-button-wrapper {
	display: block;
}

/* ── Spinning border shell ───────────────────────────────────── */
.be-gradient-button-border {
	/* defaults – overridden by Elementor selectors */
	--be-btn-border-width : 2px;
	--be-btn-duration     : 4s;
	--be-btn-c1           : #5FB4A3;
	--be-btn-c2           : #FF9C19;
	--be-btn-c3           : #FF4627;
	--be-btn-c4           : #FF9C19;
	--be-btn-c5           : #5FB4A3;
	--be-btn-bg-color     : #1a1a1a;

	position      : relative;
	display       : inline-block;
	padding       : var(--be-btn-border-width);
	border-radius : 5px;
	overflow      : hidden;

	animation: be-btn-spin var(--be-btn-duration) linear infinite;
}

/* spinning conic gradient (the "border") */
.be-gradient-button-border::before {
	content       : '';
	position      : absolute;
	inset         : 0;
	border-radius : inherit;
	background    : conic-gradient(
		from var(--be-btn-angle),
		var(--be-btn-c1),
		var(--be-btn-c1) 15%,
		var(--be-btn-c2) 30%,
		var(--be-btn-c3) 50%,
		var(--be-btn-c4) 70%,
		var(--be-btn-c5) 85%,
		var(--be-btn-c1)
	);
	z-index: 0;
}

/* inner background mask */
.be-gradient-button-border::after {
	content       : '';
	position      : absolute;
	inset         : var(--be-btn-border-width);
	background    : var(--be-btn-bg-color);
	border-radius : inherit;
	z-index       : 0;
}

/* ── Button anchor ───────────────────────────────────────────── */
.be-gradient-button {
	/* defaults */
	--be-btn-text-color : #ffffff;

	position        : relative;
	z-index         : 1;
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	gap             : 8px; /* default gap, overridden by image_gap control */
	background      : var(--be-btn-bg-color, #1a1a1a);
	border-radius   : 9999px;
	color           : var(--be-btn-text-color);
	text-decoration : none;
	transition      : opacity .2s ease;
}

.be-gradient-button:hover {
	opacity: .95;
}

/* ── Button image ────────────────────────────────────────────── */
.be-gradient-button-img {
	display        : block;       /* removes inline baseline gap   */
	width          : 20px;        /* default, overridden by slider */
	height         : auto;
	flex-shrink    : 0;           /* never squish inside flex row  */
	object-fit     : contain;
}

/* ── Keyframe ────────────────────────────────────────────────── */
@keyframes be-btn-spin {
	from { --be-btn-angle: 0deg;   }
	to   { --be-btn-angle: 360deg; }
}

/* ── Reduced-motion: pause animation ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.be-gradient-button-border {
		animation: none;
	}
}