/**
 * Varianten-Swatches (Farbfelder und Text-Buttons).
 *
 * Zustände: Hover, Fokus (Tastatur), ausgewählt (Ring + Haken-Kontrast),
 * nicht verfügbar (durchgestrichen + gedimmt – nicht nur Farbe).
 */
.swatches {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.swatches__legend {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	margin-block-end: var(--space-3);
	padding: 0;
}

.swatches__current {
	color: var(--theme-text-muted);
	font-weight: var(--font-weight-regular);
}

.swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.swatch {
	cursor: pointer;
	display: inline-flex;
	position: relative;
}

/* Echtes Radio bleibt fokussierbar, ist aber unsichtbar über dem Swatch */
.swatch__input {
	block-size: 100%;
	cursor: inherit;
	inline-size: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	z-index: 1;
}

/* Farbfeld */
.swatch__color {
	background: linear-gradient(135deg, var(--swatch-1) 50%, var(--swatch-2) 50%);
	block-size: var(--size-tap);
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--border-width-thin) rgb(17 17 17 / 0.18);
	display: block;
	inline-size: var(--size-tap);
	position: relative;
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-standard);
}

.swatch--color::after {
	border: var(--border-width-medium) solid transparent;
	border-radius: 50%;
	content: "";
	inset: calc(-1 * var(--space-1));
	pointer-events: none;
	position: absolute;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
	.swatch--color:hover .swatch__color {
		transform: scale(1.08);
	}

	.swatch--color:hover::after {
		border-color: var(--theme-border-strong);
	}
}

.swatch--color:has(.swatch__input:checked)::after {
	border-color: var(--theme-swatch-ring);
}

.swatch--color:has(.swatch__input:focus-visible)::after {
	border-color: var(--theme-focus-ring);
	outline: var(--theme-focus-width) solid var(--theme-focus-ring);
	outline-offset: var(--border-width-medium);
}

/* Text-Button (z. B. Größe, Farbe ohne hinterlegten Farbwert) */
.swatch__name {
	align-items: center;
	border: var(--border-width-medium) solid var(--theme-border);
	border-radius: var(--theme-btn-radius);
	display: inline-flex;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	justify-content: center;
	min-block-size: var(--size-tap);
	min-inline-size: var(--size-tap);
	padding: var(--space-2) var(--space-4);
	transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
	.swatch--label:hover .swatch__name {
		border-color: var(--theme-text);
	}
}

.swatch--label:has(.swatch__input:checked) .swatch__name {
	background: var(--theme-text);
	border-color: var(--theme-text);
	color: var(--theme-text-inverse);
}

.swatch--label:has(.swatch__input:focus-visible) .swatch__name {
	outline: var(--theme-focus-width) solid var(--theme-focus-ring);
	outline-offset: var(--border-width-medium);
}

/* Nicht verfügbar */
.swatch.is-unavailable {
	opacity: 0.45;
}

.swatch--color.is-unavailable .swatch__color::after {
	background: var(--theme-text);
	block-size: var(--border-width-medium);
	content: "";
	inline-size: 120%;
	inset-block-start: calc(50% - 0.0625rem);
	inset-inline-start: -10%;
	position: absolute;
	rotate: -45deg;
}

.swatch--label.is-unavailable .swatch__name {
	text-decoration: line-through;
}