/* ───────────────── Checkbox / Radio ───────────────── */

input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;

	width: 16px;
	height: 16px;
	border-radius: 9999px;

	border: 2px solid var(--color-default-border);
	background: var(--color-default-surface-accent);
	color: var(--color-current-text);

	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	flex: 0 0 auto;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border-color: var(--color-current-text);
	background: color-mix(in srgb, var(--color-current-text) 22%, transparent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-current-text) 24%, transparent);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	cursor: not-allowed;
	opacity: .55;
}

input[type="checkbox"] {
	position: relative;
}

input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--color-current-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="radio"] {
	position: relative;
}

input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 9999px;
	background: var(--color-current-text);
}