.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.5rem;
	padding: 0.5rem;

	font-weight: 500;
	color: var(--text-on-field);
	background-color: var(--surface-neutral);
	transition: background-color var(--transition-duration) var(--transition-timing);

	&:hover, &:focus-visible { background-color: color-mix(in oklab, var(--surface-neutral), var(--text-on-field) 12%) }

	svg {
		min-width: 0;
		inline-size: 1rem;
		block-size: 1rem;
	}
}