/**
 * Swatch option: .mk-swatch-option (templates/components/swatch-option.php).
 * One size per breakpoint, no size variants: theme.json
 * `custom.swatchOption.{mobile,tablet,desktop}` (48rem / 64rem =
 * `custom.breakpoint.{tablet,desktop}`).
 *
 * The root is the ring-sized slot; the colour circle sits in its centre.
 * Selected: a ring (::after of the swatch) grows out from under the circle
 * and fades in. The swatch colour comes from --mk-swatch-color (content).
 */

.mk-swatch-option {
	--mk-swatch-size: var(--wp--custom--swatch-option--mobile--size);
	--mk-swatch-ring-size: var(--wp--custom--swatch-option--mobile--ring-size);

	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: var(--mk-swatch-ring-size);
	block-size: var(--mk-swatch-ring-size);
	cursor: pointer;
}

@media (min-width: 48rem) {
	.mk-swatch-option {
		--mk-swatch-size: var(--wp--custom--swatch-option--tablet--size);
		--mk-swatch-ring-size: var(
			--wp--custom--swatch-option--tablet--ring-size
		);
	}
}

@media (min-width: 64rem) {
	.mk-swatch-option {
		--mk-swatch-size: var(--wp--custom--swatch-option--desktop--size);
		--mk-swatch-ring-size: var(
			--wp--custom--swatch-option--desktop--ring-size
		);
	}
}

/* Hidden but focusable and announced; the label is the hit area. */
.mk-swatch-option__input {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
}

.mk-swatch-option__swatch {
	/* Space between the circle and the ring (also the ring offset). */
	--mk-swatch-gap: calc(
		(var(--mk-swatch-ring-size) - var(--mk-swatch-size)) / 2
	);

	position: relative;
	inline-size: var(--mk-swatch-size);
	block-size: var(--mk-swatch-size);
	border-radius: var(--wp--custom--swatch-option--radius);
	background-color: var(
		--mk-swatch-color,
		var(--wp--custom--color--swatch--default)
	);
}

.mk-swatch-option__swatch::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--mk-swatch-gap));
	box-sizing: border-box;
	border-width: var(--wp--custom--swatch-option--ring-width);
	border-style: solid;
	border-color: var(--wp--custom--color--interactive--default);
	border-radius: var(--wp--custom--swatch-option--radius);
	opacity: 0;
	transform: scale(0.6);
	transition-property: opacity, transform;
	transition-duration: var(--wp--custom--motion--duration--fast);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-swatch-option__input:checked + .mk-swatch-option__swatch::after {
	opacity: 1;
	transform: none;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--emphasized);
}

/* Keyboard focus outside the ring. */
.mk-swatch-option__input:focus-visible + .mk-swatch-option__swatch {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(
		var(--mk-swatch-gap) + var(--wp--custom--focus--ring-offset)
	);
}

.mk-swatch-option:has(:disabled) {
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.mk-swatch-option__swatch::after {
		transition: none;
	}
}