.card-option:has(> input[type="radio"]) {
	--card-option-control-size: var(--sui-radio-size);
}

.card-option:has(> input[type="checkbox"]) {
	--card-option-control-size: var(--sui-checkbox-size);
}

.card-option {
	--card-option-padding: calc(var(--sui-base-padding) * 4 / 3);

	position: relative;
	display: block;
	width: 100%;
	padding: var(--card-option-padding);
	padding-inline-start: calc(
		var(--card-option-padding) +
		var(--sui-base-padding) +
		var(--card-option-control-size)
	);
	box-sizing: border-box;
	border: 1px solid var(--sui-color-outline-primary);
	border-radius: var(--sui-roundness-normal);
	background-color: var(--sui-color-surface);
	cursor: pointer;
}

.card-option:hover {
	background-color: var(--sui-color-highlight-secondary);
}

.card-option > input {
	position: absolute;
	inset-block-start: round(
		nearest,
		calc(
			var(--card-option-padding) +
			(1lh - var(--card-option-control-size)) / 2 +
			2px
		),
		1px
	);
	inset-inline-start: var(--card-option-padding);
	line-height: inherit;
	margin: 0;
}

.card-option:has(> input:checked) {
	background-color: var(--sui-color-key-tertiary);
	border-color: var(--sui-color-key-primary);
}

.card-option:has(> input:focus-visible) {
	border-color: var(--sui-color-key-primary);
}

.card-option:has(> input.error) {
	border-color: var(--sui-color-error);
}

.card-option:has(> input.error:checked) {
	border-color: var(--sui-color-error);
	background-color: color-mix(in srgb, var(--sui-color-error) 12%, transparent);
}

.card-option:has(> input:disabled) {
	color: var(--sui-color-on-neutral-tertiary);
	background-color: var(--sui-color-disabled-fill);
	cursor: default;
}