.olelo-highlight-card {
	&:focus-visible {
		outline: 2px solid var(--color-purple);
		outline-offset: 2px;
	}

	&:active {
		background-color: color-mix(
			in oklch,
			var(--color-periwinkle) 22%,
			var(--color-gray-96)
		);
	}
}

@media (hover: hover) and (pointer: fine) {
	.olelo-highlight-card:hover:not(:active) {
		background-color: color-mix(
			in oklch,
			var(--color-periwinkle) 18%,
			var(--color-gray-96)
		);
	}
}