/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :root, :host, [data-theme] {
    --pico-skeleton-color: var(--pico-muted-border-color);
    --pico-skeleton-highlight-color: var(--lightningcss-light, var(--pico-form-element-background-color)) var(--lightningcss-dark, oklch(32% .008 265));
    --pico-skeleton-duration: 1.5s;
    --pico-skeleton-line-height: 1em;
    --pico-skeleton-avatar-size: 3rem;
    --pico-skeleton-block-size: 8rem;
  }

  [aria-busy="true"]:has([data-skeleton]) {
    white-space: normal;
  }

  [aria-busy="true"]:has([data-skeleton]):before {
    content: none;
  }

  [aria-busy="true"] [data-skeleton] {
    box-sizing: border-box;
    margin-block: 0 calc(var(--pico-typography-spacing-vertical) * .75);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-skeleton-color);
    color: #0000;
    -webkit-user-select: none;
    user-select: none;
    display: block;
  }

  [aria-busy="true"] [data-skeleton]:last-child {
    margin-bottom: 0;
  }

  [aria-busy="true"] [data-skeleton][data-skeleton="line"] {
    inline-size: 100%;
    block-size: var(--pico-skeleton-line-height);
  }

  [aria-busy="true"] [data-skeleton][data-skeleton="avatar"] {
    inline-size: var(--pico-skeleton-avatar-size);
    block-size: var(--pico-skeleton-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    margin-block: 0;
  }

  [aria-busy="true"] [data-skeleton][data-skeleton="block"] {
    inline-size: 100%;
    block-size: var(--pico-skeleton-block-size);
    border-radius: var(--pico-card-border-radius);
  }

  @media (prefers-reduced-motion: no-preference) {
    [aria-busy="true"] [data-skeleton] {
      background-image: linear-gradient(90deg,
      transparent 30%,
      var(--pico-skeleton-highlight-color) 50%,
      transparent 70%);
      animation: skeleton-shimmer var(--pico-skeleton-duration) ease-in-out infinite;
      background-repeat: no-repeat;
      background-size: 200% 100%;
    }

    [dir="rtl"] [aria-busy="true"] [data-skeleton] {
      animation-direction: reverse;
    }
  }

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

    to {
      background-position: 0 0;
    }
  }
}

@layer pico.utilities;