/* Register all gradient stop variables */
@property --stop1 {
	syntax: "<percentage>";
	initial-value: -40%;
	inherits: false;
}

@property --stop2 {
	syntax: "<percentage>";
	initial-value: -15%;
	inherits: false;
}

@property --stop3 {
	syntax: "<percentage>";
	initial-value: -10%;
	inherits: false;
}

@property --stop4 {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: false;
}

/* Shared Hover Effect */
.wp-block-button__link.is-animated {
	animation: gradientShift 0.6s ease forwards;
}

@keyframes gradientShift {
	to {
		--stop1: 100%;
		--stop2: 125%;
		--stop3: 130%;
		--stop4: 140%;
	}
}

/* Shared Button Base Styles */
.wp-block-button .wp-block-button__link {
	border-radius: 1rem;
	transition:
		--stop1 0.6s ease,
		--stop2 0.6s ease,
		--stop3 0.6s ease,
		--stop4 0.6s ease;
}

/* Light Blue Button Variables */
.wp-block-button.is-style-light-blue {
	--color-a: var(--wp--preset--color--secundary-light-blue);
	--color-b: var(--wp--preset--color--secundary-pale-blue);
}

.wp-block-button.is-style-light-blue .wp-block-button__link {
	background: linear-gradient(
		115deg,
		var(--color-a) var(--stop1),
		var(--color-b) var(--stop1),
		var(--color-b) var(--stop2),
		var(--color-a) var(--stop2),
		var(--color-a) var(--stop3),
		var(--color-b) var(--stop3),
		var(--color-b) var(--stop4),
		var(--color-a) var(--stop4)
	);
	color: var(--wp--preset--color--primary-blue);
}

/* Orange Button Variables */
.wp-block-button.is-style-orange {
	--color-a: var(--wp--preset--color--primary-orange);
	--color-b: var(--wp--preset--color--secundary-light-orange);
}
.wp-block-button.is-style-orange .wp-block-button__link {
	background: linear-gradient(
		115deg,
		var(--color-a) var(--stop1),
		var(--color-b) var(--stop1),
		var(--color-b) var(--stop2),
		var(--color-a) var(--stop2),
		var(--color-a) var(--stop3),
		var(--color-b) var(--stop3),
		var(--color-b) var(--stop4),
		var(--color-a) var(--stop4)
	);
	color: white;
}

/* Blue Button Variables */
.wp-block-button.is-style-blue {
	--color-a: var(--wp--preset--color--primary-blue);
	--color-b: rgba(85, 120, 190);
}

.wp-block-button.is-style-blue .wp-block-button__link {
	background: linear-gradient(
		115deg,
		var(--color-a) var(--stop1),
		var(--color-b) var(--stop1),
		var(--color-b) var(--stop2),
		var(--color-a) var(--stop2),
		var(--color-a) var(--stop3),
		var(--color-b) var(--stop3),
		var(--color-b) var(--stop4),
		var(--color-a) var(--stop4)
	);
	color: white;
}