/**
 * Neutral motion contract for Commerce Storefront components.
 *
 * Components consume this contract without legacy duration aliases.
 */

:root {
	--commerce-motion-duration-instant: 0ms;
	--commerce-motion-duration-fast: 200ms;
	--commerce-motion-duration-standard: 300ms;
	--commerce-motion-duration-emphasized: 500ms;
	--commerce-motion-easing-standard: cubic-bezier(.3, 1, .3, 1);
	--commerce-motion-easing-entrance: cubic-bezier(.3, 1, .3, 1);
	--commerce-motion-easing-exit: cubic-bezier(.7, 0, .2, 1);
	--commerce-motion-easing-emphasized: cubic-bezier(.075, .82, .165, 1);
	--commerce-motion-stagger: 100ms;
	--commerce-motion-reveal-distance: 2.5rem;
	--commerce-motion-hover-lift: -0.25rem;
	--commerce-motion-image-zoom: 1.08;
	--commerce-motion-button-press: .98;
	--commerce-motion-drawer-duration: 600ms;
	--commerce-motion-backdrop-duration: 800ms;
	--commerce-motion-sticky-duration: 500ms;
	--commerce-motion-disclosure-duration: 500ms;
	--commerce-motion-gallery-duration: 300ms;
	--commerce-motion-loading-duration: 200ms;
	--commerce-motion-cart-feedback-duration: 300ms;
}

.commerce-button {
	position: relative;
	transition:
		border-color var(--commerce-motion-duration-fast) var(--commerce-motion-easing-standard),
		background-color var(--commerce-motion-duration-fast) var(--commerce-motion-easing-standard),
		color var(--commerce-motion-duration-fast) var(--commerce-motion-easing-standard),
		opacity var(--commerce-motion-loading-duration) var(--commerce-motion-easing-standard),
		transform var(--commerce-motion-duration-fast) var(--commerce-motion-easing-standard);
}

.commerce-button:is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
	opacity: .6;
}

.commerce-button[aria-busy="true"] {
	cursor: progress;
}

.commerce-button__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--commerce-motion-loading-duration) var(--commerce-motion-easing-standard);
}

.commerce-button__spinner,
.commerce-loading-indicator {
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid currentcolor;
	border-inline-end-color: transparent;
	border-radius: 50%;
}

.commerce-button__spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	transition: opacity var(--commerce-motion-loading-duration) var(--commerce-motion-easing-standard);
}

.commerce-button[aria-busy="true"] .commerce-button__content {
	opacity: 0;
}

.commerce-button[aria-busy="true"] .commerce-button__spinner {
	opacity: 1;
}

.commerce-loading-surface {
	transition: opacity var(--commerce-motion-loading-duration) var(--commerce-motion-easing-standard);
}

.commerce-loading-surface[aria-busy="true"] {
	opacity: .65;
}

.commerce-progress {
	--commerce-progress-value: 0;

	inline-size: 100%;
}

.commerce-progress__track {
	position: relative;
	block-size: var(--commerce-progress-size, .5rem);
	overflow: hidden;
	border-radius: 999px;
	background: var(--commerce-color-surface);
}

.commerce-progress__value {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--commerce-color-action);
	transform: scaleX(clamp(0, var(--commerce-progress-value), 1));
	transform-origin: left center;
	transition: transform var(--commerce-motion-duration-standard) var(--commerce-motion-easing-standard);
}

[dir="rtl"] .commerce-progress__value {
	transform-origin: right center;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.commerce-button:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover {
		transform: translateY(var(--commerce-motion-hover-lift));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.commerce-button:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active {
		transform: scale(var(--commerce-motion-button-press));
	}

	.commerce-button[aria-busy="true"] .commerce-button__spinner,
	.commerce-loading-indicator:not([hidden]) {
		animation: commerce-motion-spin 700ms linear infinite;
	}
}

@keyframes commerce-motion-spin {
	to {
		transform: rotate(1turn);
	}
}

.commerce-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--commerce-overlay-z-index, var(--commerce-layer-overlay));
}

.commerce-overlay[hidden] {
	display: none;
}

.commerce-overlay__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: 0;
	background: var(--commerce-color-overlay);
	opacity: 0;
	transition: opacity 800ms cubic-bezier(.7, 0, .2, 1);
}

.commerce-overlay__panel {
	position: absolute;
	max-inline-size: 100%;
	background: var(--commerce-color-background);
}

.commerce-overlay:is([data-state="opening"], [data-state="open"]) .commerce-overlay__backdrop {
	opacity: 1;
	transition-timing-function: var(--commerce-motion-easing-entrance);
}

@media (prefers-reduced-motion: reduce) {
	:where([class^="commerce-"], [class*=" commerce-"]),
	:where([class^="commerce-"], [class*=" commerce-"])::before,
	:where([class^="commerce-"], [class*=" commerce-"])::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.commerce-button {
		transform: none !important;
	}

	.commerce-progress__value {
		transition: none !important;
	}

	.commerce-button__spinner,
	.commerce-loading-indicator {
		animation: none !important;
	}

	.commerce-overlay__backdrop {
		opacity: 1;
	}

}