/**
 * Size badge: .mk-size-badge--medium / --small (templates/components/size-badge.php).
 *
 * A visually hidden native radio drives the state of the visible pill
 * (__label) through sibling selectors. States only switch --mk-size-badge-border.
 */

.mk-size-badge {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.mk-size-badge--medium {
	--mk-size-badge-min-width: var(--wp--custom--size-badge--medium--min-width);
	--mk-size-badge-padding-block: var(
		--wp--custom--size-badge--medium--padding-block
	);
	--mk-size-badge-padding-inline: var(
		--wp--custom--size-badge--medium--padding-inline
	);
}

.mk-size-badge--small {
	--mk-size-badge-min-width: var(--wp--custom--size-badge--small--min-width);
	--mk-size-badge-padding-block: var(
		--wp--custom--size-badge--small--padding-block
	);
	--mk-size-badge-padding-inline: var(
		--wp--custom--size-badge--small--padding-inline
	);
}

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

.mk-size-badge__label {
	--mk-size-badge-border: var(--wp--custom--color--interactive--subtle);

	box-sizing: border-box;
	min-inline-size: var(--mk-size-badge-min-width);
	padding-block: var(--mk-size-badge-padding-block);
	padding-inline: var(--mk-size-badge-padding-inline);
	border-width: var(--wp--custom--size-badge--border-width);
	border-style: solid;
	border-color: var(--mk-size-badge-border);
	border-radius: var(--wp--custom--size-badge--radius);
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
	text-align: center;
	white-space: nowrap;
	transition-property: border-color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-size-badge__input:focus-visible + .mk-size-badge__label {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

@media (hover: hover) {
	/* Pointer devices only. */
	.mk-size-badge:hover
		.mk-size-badge__input:not(:checked, :disabled)
		+ .mk-size-badge__label {
		--mk-size-badge-border: var(--wp--custom--color--interactive--default);
	}
}

/* Pressed and selected share the colour. */
.mk-size-badge:active
	.mk-size-badge__input:not(:disabled)
	+ .mk-size-badge__label,
.mk-size-badge__input:checked + .mk-size-badge__label {
	--mk-size-badge-border: var(--wp--custom--color--interactive--selected);
}

.mk-size-badge:has(:disabled) {
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.mk-size-badge__label {
		transition: none;
	}
}