/**
 * Product color swatches.
 *
 * HEX values arrive through the per-button --fsp-swatch-color custom
 * property; all structural colors use the theme token system.
 */

.fsp-color-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fsp-space-3);
	margin-block: var(--fsp-space-1);
}

.fsp-color-swatches__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsp-space-2);
}

.fsp-color-swatch__button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--fsp-swatch-size);
	height: var(--fsp-swatch-size);
	min-width: var(--fsp-swatch-size);
	padding: 0;
	border: 2px solid var(--fsp-border);
	background: var(--fsp-swatch-color, var(--fsp-surface));
	box-shadow: 0 0 0 2px var(--fsp-surface);
	cursor: pointer;
	transition:
		border-color var(--fsp-dur-fast) var(--fsp-ease),
		box-shadow var(--fsp-dur-fast) var(--fsp-ease),
		transform var(--fsp-dur-fast) var(--fsp-ease),
		opacity var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-color-swatches--circle .fsp-color-swatch__button {
	border-radius: var(--fsp-radius-pill);
}

.fsp-color-swatches--rounded .fsp-color-swatch__button {
	border-radius: var(--fsp-radius-md);
}

.fsp-color-swatches--square .fsp-color-swatch__button {
	border-radius: 0;
}

.fsp-color-swatch__button:hover:not(:disabled) {
	border-color: var(--fsp-blue-600);
	transform: translateY(-1px);
}

.fsp-color-swatch__button:focus-visible {
	outline: 2px solid var(--fsp-focus-ring);
	outline-offset: 3px;
}

.fsp-color-swatch__button.is-selected {
	border-color: var(--fsp-blue-700);
	box-shadow:
		0 0 0 2px var(--fsp-surface),
		0 0 0 4px var(--fsp-blue-500);
}

.fsp-color-swatch__button:disabled,
.fsp-color-swatch__button.is-disabled {
	opacity: 0.28;
	cursor: not-allowed;
	transform: none;
}

.fsp-color-swatch__button:disabled::before,
.fsp-color-swatch__button.is-disabled::before,
.fsp-color-swatch__button.is-missing-color::after {
	content: "";
	position: absolute;
	width: 115%;
	height: 2px;
	border-radius: var(--fsp-radius-pill);
	background: var(--fsp-danger);
	transform: rotate(-45deg);
}

.fsp-color-swatch__button.is-missing-color::after {
	width: 70%;
	background: var(--fsp-ink-300);
}

.fsp-color-swatches__selected {
	min-width: 8ch;
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-sm);
}

.fsp-color-swatches__selected strong:empty::before {
	content: attr(data-empty-label);
}

/*
 * Keep Woo's native select available to screen readers and variation-form
 * JavaScript while removing it from the visual layout.
 */
.fsp-color-swatches__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fsp-color-swatch__button {
		transition: none;
	}
}