/**
 * Checkbox and radio (Style Guide 08 — UI elements)
 *
 * Square checkbox, circular radio, both 1px forest border with a
 * forest fill when selected.
 *
 * Usage:
 *   <label class="choice">
 *     <input class="choice__control" type="checkbox">
 *     <span class="choice__label">Checkbox</span>
 *   </label>
 *
 *   <label class="choice choice--radio">
 *     <input class="choice__control" type="radio" name="size">
 *     <span class="choice__label">Radio</span>
 *   </label>
 */

.choice {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	cursor: pointer;
	line-height: var(--line-snug);
}

.choice__control {
	appearance: none;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-none);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* Radio — circular box, dot indicator. */
.choice--radio .choice__control,
.choice__control[type="radio"] {
	border-radius: var(--radius-full);
}

/* Checkbox tick. */
.choice__control[type="checkbox"]::before {
	content: "";
	width: 0.625rem;
	height: 0.375rem;
	border-left: var(--border-width-strong) solid var(--color-inverse);
	border-bottom: var(--border-width-strong) solid var(--color-inverse);
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.choice__control[type="checkbox"]:checked {
	background: var(--color-primary);
}

.choice__control[type="checkbox"]:checked::before {
	opacity: 1;
}

/* Radio dot. */
.choice__control[type="radio"]::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	transform: scale(0);
	transition: transform var(--transition-fast);
}

.choice__control[type="radio"]:checked::before {
	transform: scale(1);
}

.choice__control:hover {
	border-color: var(--color-primary-hover);
}

.choice__control:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

.choice__control:disabled {
	border-color: var(--color-border);
	background: var(--color-surface-muted);
	cursor: not-allowed;
}

.choice__control:disabled:checked {
	background: var(--color-muted);
	border-color: var(--color-muted);
}

.choice__label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.choice:has(.choice__control:disabled) {
	cursor: not-allowed;
}

.choice:has(.choice__control:disabled) .choice__label {
	color: var(--color-muted);
}

/* --- Groups --- */

.choice-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.choice-group--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
}

/**
 * Swatch — a radio rendered as a bordered box, for sizes and colour options.
 *
 *   <label class="swatch">
 *     <input class="swatch__control" type="radio" name="size">
 *     <span class="swatch__value">M</span>
 *   </label>
 */
.swatch {
	display: inline-flex;
	cursor: pointer;
}

.swatch__control {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.swatch__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-height-sm);
	min-height: var(--control-height-sm);
	padding: 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-heading);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	transition: background var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast);
}

.swatch__control:hover + .swatch__value {
	border-color: var(--color-border-strong);
}

.swatch__control:checked + .swatch__value {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-inverse);
}

.swatch__control:focus-visible + .swatch__value {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

.swatch__control:disabled + .swatch__value {
	color: var(--color-muted);
	background: var(--color-surface-muted);
	cursor: not-allowed;
	text-decoration: line-through;
}