/**
 * Product-card colour swatches — E28.
 *
 * The design draws a 12px dot. WCAG 2.2 (2.5.8) requires a 24px target for
 * anything clickable, and E28 makes these clickable — so the dot stays 12px
 * and the *hit area* grows to 24px around it. The row is 24px tall instead of
 * 12px; nothing else about the card moves.
 *
 * The open item for the designer is whether they would rather redraw the row.
 * Nothing here forecloses that: the dot size is one value.
 */

.hermizon-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Zero, because each item already carries 6px of padding on both sides —
	 * the visible gap between two 12px dots is the 12px that makes up. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hermizon-swatches__item {
	margin: 0;
}

.hermizon-swatches__link,
.hermizon-swatches__static {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	text-decoration: none;
}

/* A text chip is wider than a dot and cannot pretend otherwise. */
.hermizon-swatches__link:has(.is-text),
.hermizon-swatches__static:has(.is-text) {
	width: auto;
	padding-inline: var(--wp--preset--spacing--10);
}

.hermizon-swatch {
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	/* Every swatch is outlined, not only the pale ones: White would otherwise
	 * be invisible on the card, and an outline on some dots and not others
	 * reads as a selected state. */
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background-size: cover;
	background-position: center;
}

.hermizon-swatch.is-text {
	width: auto;
	height: auto;
	padding: 1px var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	white-space: nowrap;
}

.hermizon-swatches__link:hover .hermizon-swatch,
.hermizon-swatches__link:focus-visible .hermizon-swatch {
	border-color: var(--wp--preset--color--contrast);
	transform: scale(1.15);
}

/* The name, on hover (Phase 20). A 12px dot cannot say "Golden", and until a
 * shopper clicks it nothing does — the accessible name never paints. So the
 * `data-hermizon-name` the dot already carries becomes a small tooltip above
 * it, for pointer hover and keyboard focus alike. Touch users lose nothing
 * they had: the tap keeps swapping the card image, and the swapped photo is
 * the answer.
 *
 * `/ ""` marks the pseudo-content decorative, so a screen reader is not told
 * the colour twice — the link's aria-label and the static dot's
 * screen-reader-text already carry it.
 *
 * Text chips (Multicolor, Antique) already say their name; no tooltip. */
.hermizon-swatches__link,
.hermizon-swatches__static {
	position: relative;
}

.hermizon-swatches__link::after,
.hermizon-swatches__static::after {
	content: attr(data-hermizon-name) / "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translate(-50%, 2px);
	z-index: 2;
	padding: 3px 8px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	white-space: nowrap;
	border-radius: var(--wp--custom--radius--sm);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--wp--custom--transition--fast),
		transform var(--wp--custom--transition--fast),
		visibility var(--wp--custom--transition--fast);
}

.hermizon-swatches__link:hover::after,
.hermizon-swatches__link:focus-visible::after,
.hermizon-swatches__static:hover::after {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.hermizon-swatches__link:has(.is-text)::after,
.hermizon-swatches__static:has(.is-text)::after {
	content: none;
}

/* The colourway the card is showing (Phase 17's swap keeps this current).
 * A ring with a gap, so it reads as selection on any dot colour — a darker
 * border alone vanishes on the dark swatches. */
.hermizon-swatches__link[aria-current='true'] .hermizon-swatch {
	border-color: var(--wp--preset--color--contrast);
	box-shadow:
		0 0 0 2px var(--wp--preset--color--base),
		0 0 0 3px var(--wp--preset--color--contrast);
}

.hermizon-swatches__link .hermizon-swatch {
	transition: transform var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

@media (prefers-reduced-motion: reduce) {
	.hermizon-swatches__link .hermizon-swatch {
		transition: none;
	}

	.hermizon-swatches__link:hover .hermizon-swatch {
		transform: none;
	}
}