.radio {
	background-color: var(--color-bg-high);
	font-size: var(--font-xs);
	text-transform: uppercase;
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-field);
	display: flex;
	align-items: center;
	gap: var(--s-1);
	cursor: pointer;
}

.emoji {
	filter: grayscale(100%);
	transition: all 0.2s;
}

.checked {
	color: var(--color-text);
	outline: 2px solid var(--color-bg-higher);

	& .emoji {
		filter: grayscale(0%);
	}
}

.focusVisible {
	outline: var(--focus-ring);
}

.radio:hover .emoji {
	scale: 1.1;
}