/*
 * Skeleton — placeholder block.
 *
 * Shapes:
 *   - rect   → rounded rectangle, sized by --_skeleton-{w,h}
 *   - circle → 1:1 ratio, fully rounded
 *   - text   → stacked thin bars at staggered widths
 *
 * Animation: optional shimmer wave via background-position keyframes.
 */
[data-skeleton] {
	--_skeleton-bg: color-mix(in srgb, var(--color-neutral-track) 60%, transparent);
	--_skeleton-highlight: color-mix(in srgb, var(--color-neutral-track) 100%, white 10%);
	--_skeleton-size: 1rem;
	--_skeleton-radius: var(--radius-md);
	--_skeleton-duration: 1.4s;

	display: block;
	background: var(--_skeleton-bg);
	border-radius: var(--_skeleton-radius);
	inline-size: 100%;
	block-size: var(--_skeleton-size);
	overflow: hidden;
	position: relative;
}

/* Sizes — intrinsic block-size when the consumer doesn't override. */
[data-skeleton][data-size='xs'] {
	--_skeleton-size: 0.5rem;
}
[data-skeleton][data-size='sm'] {
	--_skeleton-size: 0.75rem;
}
[data-skeleton][data-size='md'] {
	--_skeleton-size: 1rem;
}
[data-skeleton][data-size='lg'] {
	--_skeleton-size: 1.5rem;
}
[data-skeleton][data-size='xl'] {
	--_skeleton-size: 2rem;
}

/* ── Shapes ────────────────────────────────────────────────────────── */

[data-skeleton][data-shape='rect'] {
	--_skeleton-radius: var(--radius-md);
}

[data-skeleton][data-shape='circle'] {
	--_skeleton-radius: 50%;
	aspect-ratio: 1 / 1;
	inline-size: var(--_skeleton-size);
}

[data-skeleton][data-shape='text'] {
	display: flex;
	flex-direction: column;
	gap: calc(var(--_skeleton-size) * 0.5);
	background: transparent;
	overflow: visible;
	block-size: auto;
}

[data-skeleton-line] {
	display: block;
	block-size: var(--_skeleton-size, 1rem);
	border-radius: var(--radius-sm);
	background: var(--_skeleton-bg);
	overflow: hidden;
	position: relative;
}

/* ── Color accents ─────────────────────────────────────────────────── */

[data-skeleton][data-color='primary'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-primary-track) 50%, transparent);
	--_skeleton-highlight: color-mix(in srgb, var(--color-primary-track) 90%, white 8%);
}
[data-skeleton][data-color='secondary'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-secondary-track) 50%, transparent);
	--_skeleton-highlight: color-mix(in srgb, var(--color-secondary-track) 90%, white 8%);
}
[data-skeleton][data-color='affirm'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-affirm-track) 50%, transparent);
}
[data-skeleton][data-color='fulfill'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-fulfill-track) 50%, transparent);
}
[data-skeleton][data-color='risk'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-risk-track) 50%, transparent);
}
[data-skeleton][data-color='threat'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-threat-track) 50%, transparent);
}
[data-skeleton][data-color='loss'] {
	--_skeleton-bg: color-mix(in srgb, var(--color-loss-track) 50%, transparent);
}

/* ── Animation (shimmer wave) ──────────────────────────────────────── */

[data-skeleton][data-animated] {
	background-image: linear-gradient(
		var(--gradient-angle-to-r),
		var(--_skeleton-bg) 0%,
		var(--_skeleton-highlight) 50%,
		var(--_skeleton-bg) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer var(--_skeleton-duration) ease-in-out infinite;
}

[data-skeleton][data-shape='text'][data-animated] {
	background-image: none;
	animation: none;
}

[data-skeleton][data-shape='text'][data-animated] [data-skeleton-line] {
	background-image: linear-gradient(
		var(--gradient-angle-to-r),
		var(--_skeleton-bg) 0%,
		var(--_skeleton-highlight) 50%,
		var(--_skeleton-bg) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer var(--_skeleton-duration) ease-in-out infinite;
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-skeleton][data-animated],
	[data-skeleton][data-shape='text'][data-animated] [data-skeleton-line] {
		animation: none;
		background-image: none;
	}
}