/*!
 * @be-partner-labs/ds v1.8.0 — components/skeleton
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/skeleton.min.css">
 * npm:  @import "@be-partner-labs/ds/components/skeleton";
 * Docs: https://ds.bepartnerlabs.com/components/skeleton/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --skeleton-color:       base color (default: --bp-color-bg-subtle)
	 * --skeleton-highlight:   shimmer highlight (default: --bp-color-bg-elevated)
	 * --skeleton-radius:      border radius (default: --bp-radius-md)
	 * --skeleton-duration:    animation duration (default: 1.5s)
	 *
	 * --spinner-color:     spinner track color (default: --bp-color-border)
	 * --spinner-arc-color: spinner arc color (default: --bp-primary)
	 * --spinner-size:         diameter (default: 1.5rem)
	 * --spinner-width:        stroke width (default: 2px)
	 * --spinner-duration:     rotation duration (default: 0.7s)
	 */

	/* ─── Skeleton shimmer animation ─────────────────────────── */
	@keyframes bp-shimmer {
		from { background-position: -200% center; }
		to   { background-position: 200% center; }
	}

	/* ─── Skeleton ───────────────────────────────────────────── */
	.bp-skeleton {
		--_color: var(--skeleton-color, var(--bp-color-bg-subtle));
		--_highlight: var(--skeleton-highlight, var(--bp-color-bg-elevated));
		--_radius: var(--skeleton-radius, var(--bp-radius-md));
		--_duration: var(--skeleton-duration, 1.5s);

		display: block;
		border-radius: var(--_radius);
		background: linear-gradient(
			90deg,
			var(--_color) 25%,
			var(--_highlight) 50%,
			var(--_color) 75%
		);
		background-size: 200% 100%;
		animation: bp-shimmer var(--_duration) ease-in-out infinite;
	}

	/* ─── Skeleton shape variants ────────────────────────────── */
	.bp-skeleton--text {
		height: 1em;
		width: 100%;
	}

	.bp-skeleton--heading {
		height: 1.5em;
		width: 60%;
	}

	.bp-skeleton--circle {
		border-radius: 50%;
	}

	.bp-skeleton--rect {
		border-radius: 0;
	}

	/* ─── Spinner animation ──────────────────────────────────── */
	@keyframes bp-spin {
		to { transform: rotate(360deg); }
	}

	/* ─── Spinner ────────────────────────────────────────────── */
	.bp-spinner {
		--_color: var(--spinner-color, color-mix(in srgb, var(--bp-primary) 20%, transparent));
		--_arc-color: var(--spinner-arc-color, var(--bp-primary));
		--_size: var(--spinner-size, 1.5rem);
		--_width: var(--spinner-width, 2px);
		--_duration: var(--spinner-duration, 0.7s);

		display: inline-block;
		width: var(--_size);
		height: var(--_size);
		border-radius: 50%;
		border: var(--_width) solid var(--_color);
		border-top-color: var(--_arc-color);
		animation: bp-spin var(--_duration) linear infinite;
		flex-shrink: 0;
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-skeleton {
			animation: none;
			background: var(--_color);
		}

		.bp-spinner {
			animation: none;
			border-top-color: var(--_arc-color);
			opacity: 0.6;
		}
	}
}