/**
 * AJAX add-to-cart: loading state, inline error notice, and the "flash"
 * highlight applied to newly added items in the UAEL off-canvas mini cart.
 */

/* Loading state on the add-to-cart button while the request is in flight. */
.single_add_to_cart_button.xplore-atc-loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}

.single_add_to_cart_button.xplore-atc-loading::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.6em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: xplore-atc-spin 0.6s linear infinite;
}

@keyframes xplore-atc-spin {
	to { transform: rotate(360deg); }
}

/* Inline error notice rendered above the form when the add fails. */
.xplore-atc-notice {
	margin: 0 0 1rem;
}

.xplore-atc-notice ul {
	margin: 0;
	padding-left: 1.2em;
}

/* Flash highlight on newly added mini-cart line items. */
.mini_cart_item.xplore-cart-flash {
	animation: xplore-cart-flash 1.4s ease-out 1;
}

@keyframes xplore-cart-flash {
	0% {
		background-color: rgba(184, 134, 11, 0.35);
		box-shadow: inset 3px 0 0 0 #b8860b;
	}
	60% {
		background-color: rgba(184, 134, 11, 0.18);
		box-shadow: inset 3px 0 0 0 #b8860b;
	}
	100% {
		background-color: transparent;
		box-shadow: inset 3px 0 0 0 transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single_add_to_cart_button.xplore-atc-loading::after {
		animation: none;
	}
	.mini_cart_item.xplore-cart-flash {
		animation: none;
		background-color: rgba(184, 134, 11, 0.15);
	}
}