/**
 * @section Skeleton
 * Pulsing placeholders for content that's not loaded
 */

@layer kelp.core {
	.skeleton {
		--border-radius: var(--border-radius-s);
		--height: var(--space);
		--width: 100%;

		animation: loadingPulse 3s ease-in infinite;
		background-color: var(--color-fill-accent);
		border-radius: var(--border-radius);
		margin-block-end: var(--size-m);
		height: var(--height);
		width: var(--width);
	}

	@media (forced-colors: active) {
		.skeleton {
			border: var(--size-6xs) solid;
		}
	}

	@keyframes loadingPulse {
		0% {
			background-color: var(--color-fill-accent);
		}
		50% {
			background-color: color-mix(
				in oklab,
				var(--color-fill-accent),
				var(--color-mix-hover)
			);
		}
		100% {
			background-color: var(--color-fill-accent);
		}
	}
}