.option {
	display: inline-flex;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	color: var(--black);
	border: 2px solid var(--black);
	border-radius: 5rem;
	cursor: pointer;
	transition-property: background-color, color, border-color;
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-timing);

	&:hover, &:has(input:checked) { border-color: var(--color-1); }
	&:hover { color: var(--color-1); }

	&:has(input:checked) {
		background-color: var(--color-1);
		color: white;
	}

	&:has(input:focus-visible) {
		outline: var(--focus-outline-width) solid var(--color-focus);
		outline-offset: var(--focus-outline-offset);
	}

	input[type="radio"], input[type="checkbox"] {
		appearance: none;
		position: absolute;
		pointer-events: none;
	}

	span {
		font-size: 0.75rem;
		font-weight: bold;
	}
}