.warp-covered-block {
	--warp-cover-color: #e5e7eb;
	--warp-text-color: #1f2937;
	--warp-cover-radius: 6px;
	--warp-cover-padding: 12px;

	position: relative;
	box-sizing: border-box;
	padding: var(--warp-cover-padding);
	border-radius: var(--warp-cover-radius);
	background-color: var(--warp-cover-color);
	color: var(--warp-cover-color);
	cursor: pointer;
	overflow: hidden;
	transition: color 180ms ease, background-color 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.warp-covered-block .warp-covered-block__content,
.warp-covered-block .warp-covered-block__content * {
	color: inherit !important;
	transition: color 180ms ease;
}

.warp-covered-block .warp-covered-block__content {
	margin: 0;
}

.warp-covered-block.is-revealed {
	color: var(--warp-text-color);
	background-color: color-mix(in srgb, var(--warp-cover-color) 28%, transparent);
}

.warp-covered-block[data-reveal-mode="hover"]:hover,
.warp-covered-block[data-reveal-mode="both"]:hover {
	color: var(--warp-text-color);
	background-color: color-mix(in srgb, var(--warp-cover-color) 28%, transparent);
}

.warp-covered-block:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@supports not (background-color: color-mix(in srgb, white, transparent)) {
	.warp-covered-block.is-revealed,
	.warp-covered-block[data-reveal-mode="hover"]:hover,
	.warp-covered-block[data-reveal-mode="both"]:hover {
		background-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.warp-covered-block,
	.warp-covered-block .warp-covered-block__content,
	.warp-covered-block .warp-covered-block__content * {
		transition: none;
	}
}