@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * SKELETON
 * ======================================== */

  .cinder-skeleton {
    display: block;
    width: 100%;
    height: 1em;
    border-radius: var(--cinder-radius-sm);
    background: linear-gradient(
      90deg,
      var(--cinder-surface-inset) 0%,
      oklch(from var(--cinder-surface-inset) calc(l + 0.06) c h) 50%,
      var(--cinder-surface-inset) 100%
    );
    background-size: 200% 100%;
    animation: cinder-skeleton-shimmer 1.5s ease-in-out infinite;
  }

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

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-skeleton {
      animation: none;
      background: var(--cinder-surface-inset);
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on']) .cinder-skeleton {
    animation: none;
    background: var(--cinder-surface-inset);
  }
}