/**
 * Skeleton: .mk-skeleton (templates/components/skeleton.php). Tokens:
 * theme.json `skeleton` (line 14 high, 8 apart, radius 4, last of several
 * lines 60% wide, box radius 8, sheen every 1.6s) and `color.skeleton`
 * (base, highlight, shine).
 *
 * The sheen is one wide gradient (base → highlight → shine → highlight →
 * base) sliding across each piece. Reduced motion: no sheen, the base only.
 */

.mk-skeleton {
	display: grid;
	gap: var(--wp--custom--skeleton--line-gap);
	inline-size: var(--mk-skeleton-width, 100%);
}

.mk-skeleton--block,
.mk-skeleton--circle {
	block-size: 100%;
	border-radius: var(--wp--custom--skeleton--block-radius);
}

.mk-skeleton--circle {
	border-radius: var(--wp--preset--border-radius--full);
}

.mk-skeleton__line {
	block-size: var(--wp--custom--skeleton--line-height);
	border-radius: var(--wp--custom--skeleton--line-radius);
}

.mk-skeleton__line:last-child:not(:only-child) {
	inline-size: var(--wp--custom--skeleton--last-line-width);
}

.mk-skeleton--block,
.mk-skeleton--circle,
.mk-skeleton__line {
	background-color: var(--wp--custom--color--skeleton--base);
	background-image: linear-gradient(
		100deg,
		var(--wp--custom--color--skeleton--base) 30%,
		var(--wp--custom--color--skeleton--highlight) 44%,
		var(--wp--custom--color--skeleton--shine) 50%,
		var(--wp--custom--color--skeleton--highlight) 56%,
		var(--wp--custom--color--skeleton--base) 70%
	);
	background-size: 300% 100%;
	animation: mk-skeleton-sheen var(--wp--custom--skeleton--duration)
		ease-in-out infinite;
}

@keyframes mk-skeleton-sheen {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-skeleton--block,
	.mk-skeleton--circle,
	.mk-skeleton__line {
		background-image: none;
		animation: none;
	}
}