.highlight-video [hidden] {
	display: none;
}

.highlight-video-play {
	inline-size: clamp(4rem, 7vw, 6.25rem);
	block-size: clamp(4rem, 7vw, 6.25rem);
	background: color-mix(in oklch, oklch(1 0 none) 30%, transparent);
	backdrop-filter: blur(8px);
}

.highlight-video-overlay:focus-visible {
	outline: 3px solid oklch(1 0 none);
	outline-offset: -6px;
}

.highlight-video-overlay:active .highlight-video-play {
	background: color-mix(in oklch, oklch(1 0 none) 50%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.highlight-video-overlay:hover .highlight-video-play {
		background: color-mix(in oklch, oklch(1 0 none) 45%, transparent);
	}
}

.highlight-video [data-playing] .highlight-video-media {
	object-fit: contain;
}