/**
 * Dynamic Highlight — Frontend appearance and animation.
 */

.d-hili {
	display: inline;
	padding: 0.08em 0.25em;
	border-radius: 0.2em;
	color: inherit;

	background-color: transparent;
	background-image: linear-gradient(
		to right,
		var(--d-hili-color),
		var(--d-hili-color)
	);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0% 100%;

	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/**
 * The frontend JavaScript adds .is-visible
 * when the element enters the viewport.
 */
.d-hili.is-visible {
	-webkit-animation: dynamic-highlight-reveal
		var(--d-hili-duration)
		ease-out
		forwards;

	animation: dynamic-highlight-reveal
		var(--d-hili-duration)
		ease-out
		forwards;
}

/**
 * Safari-compatible animation definition.
 */
@-webkit-keyframes dynamic-highlight-reveal {
	from {
		background-size: 0% 100%;
	}

	to {
		background-size: 100% 100%;
	}
}

@keyframes dynamic-highlight-reveal {
	from {
		background-size: 0% 100%;
	}

	to {
		background-size: 100% 100%;
	}
}

/**
 * Accessibility: show the final highlight state
 * without animation for users who prefer reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
	.d-hili,
	.d-hili.is-visible {
		background-size: 100% 100%;
		-webkit-animation: none;
		animation: none;
	}
}