/*
 * Skeleton loader
 * --------------------------------------------------------------------------
 * A placeholder that mirrors the LAYOUT of content that is still loading.
 *
 * Principle: only use a skeleton when (a) content is genuinely loading after
 * the initial paint (AJAX / lazy-load / fetch-on-open) AND (b) its shape is
 * known. The gap should be ~0.3s–3s. Use a spinner for unknown shapes / small
 * areas, a progress bar/ring for measurable work, and nothing for <300ms.
 * See the "Loading" atom in the design-system docs for the full guideline.
 *
 * Markup:
 *   <div class="ds-skeleton ds-skeleton--line"></div>
 *   <div class="ds-skeleton ds-skeleton--media"></div>
 * or via the Blade component: <x-ui.skeleton variant="line" />
 */

.ds-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.16);
}

.ds-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: ds-shimmer 1.4s ease-in-out infinite;
}

html[data-ds-theme="dark"] .ds-skeleton::after {
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.18) 50%, transparent 100%);
}

/* Variants ----------------------------------------------------------------- */
.ds-skeleton--line {
    height: 0.9rem;
    border-radius: var(--eb-radius-0);
}

.ds-skeleton--line-lg {
    height: 1.2rem;
    border-radius: var(--eb-radius-0);
}

.ds-skeleton--media {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.ds-skeleton--circle {
    aspect-ratio: 1;
    border-radius: var(--eb-radius-full, 50%);
}

/* Fills its positioned parent — use for lazy-image placeholders, where the
   wrapper already defines the radius and aspect ratio. */
.ds-skeleton--fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Reduced motion: keep the static block, drop the shimmer sweep.
   `.is-preview-static` is the manual equivalent used by the docs preview. */
@media (prefers-reduced-motion: reduce) {
    .ds-skeleton::after {
        animation: none;
    }
}

.ds-skeleton.is-preview-static::after {
    display: none;
}

@keyframes ds-shimmer {
    100% {
        transform: translateX(100%);
    }
}