/* ==========================================
   AURORA BUTTONS
   Bootstrap 5 extensions
========================================== */

/* Shared button styling */

.btn.aurora-btn {
	--bs-btn-font-family: var(--main-font);
	--bs-btn-font-weight: 500;

	text-transform: uppercase;
	text-align: center;
	cursor: pointer;

	transition:
		color .3s ease,
		background-color .3s ease,
		border-color .3s ease,
		filter .3s ease;
}


/* ==========================================
   SOLID PRIMARY
========================================== */

.btn.aurora-btn.btn-primary,
.ccm-block-express-form .btn.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--magenta-color);
	--bs-btn-border-color: var(--magenta-color);
	--bs-btn-border-radius: .25rem;

	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--magenta-color);
	--bs-btn-hover-border-color: var(--magenta-color);

	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--magenta-color);
	--bs-btn-active-border-color: var(--magenta-color);

	text-shadow: -.5px -.5px .5px rgba(0,0,0,.2);
	font-weight:500;
}

.btn.aurora-btn.btn-primary:hover,
.ccm-block-express-form .btn.btn-primary:hover {
	filter: brightness(1.1);
}


/* ==========================================
   OUTLINED PRIMARY
   Animated gradient border
========================================== */

.btn.aurora-btn.btn-outline-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-border-radius: .75rem;

	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: transparent;

	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: transparent;

	position: relative;
	text-shadow: none;

	animation: aurora-btn-glow 4s linear infinite;
}


/* Gradient border */

.btn.aurora-btn.btn-outline-primary::before {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid transparent;
	border-radius: inherit;

	background: var(--blue-gradient) border-box;
	background-size: 100% 100%;
	background-position: center left;

	-webkit-mask:
		linear-gradient(#fff 0 0) padding-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;

	mask:
		linear-gradient(#fff 0 0) padding-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;

	pointer-events: none;

	animation: aurora-btn-gradient 3s linear infinite;
}


/* Optional filled outline */

.btn.aurora-btn.btn-outline-primary.aurora-btn-filled {
	--bs-btn-bg: var(--dark-blue-color-lighter);
	--bs-btn-hover-bg: var(--dark-blue-color);
	--bs-btn-active-bg: var(--dark-blue-color);
}


/* Dark text variant */

.btn.aurora-btn.btn-outline-primary.aurora-btn-dark {
	--bs-btn-color: var(--dark-blue-color);
	--bs-btn-hover-color: var(--magenta-color);
}


/* Keyboard accessibility */

.btn.aurora-btn:focus-visible {
	outline: 2px solid var(--cyan-color);
	outline-offset: 3px;
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes aurora-btn-glow {
	0%, 100% {
		box-shadow: var(--outer-glow);
	}

	50% {
		box-shadow: var(--outer-glow-less);
	}
}

@keyframes aurora-btn-gradient {
	0%, 100% {
		background-size: 100% 100%;
		background-position: center left;
		filter: brightness(1);
	}

	50% {
		background-size: 200% 200%;
		background-position: center right;
		filter: brightness(1.5);
	}
}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
	.btn.aurora-btn,
	.btn.aurora-btn.btn-outline-primary,
	.btn.aurora-btn.btn-outline-primary::before {
		animation: none;
		transition: none;
	}
}


/* Standard buttons */
.btn.aurora-btn {
	--bs-btn-padding-y: .65rem;
	--bs-btn-padding-x: 1.5rem;
}

/* Small buttons */
.btn.aurora-btn.btn-sm {
	--bs-btn-padding-y: .4rem;
	--bs-btn-padding-x: 1.125rem;
}

/* Large buttons */
.btn.aurora-btn.btn-lg {
	--bs-btn-padding-y: .85rem;
	--bs-btn-padding-x: 2rem;
}