/*
 * The three measurements are the caller's DATA, so they arrive as properties
 * rather than as an inline `width`/`height`/`border-radius` a consumer could
 * only beat with `!important`.
 *
 * `flex-shrink: 0` is the placeholder's whole contract: a tile that gives way
 * reserves less than the content arriving, which is the layout shift this
 * component exists to prevent.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-skeleton {
    display: block;
    width: var(--lotics-skeleton-width);
    height: var(--lotics-skeleton-height);
    flex-shrink: 0;
    border-radius: var(--lotics-skeleton-radius);
    background: var(--muted);
    animation-name: lotics-skeleton-pulse;
    /* Six rungs of the travelling duration — 1440ms, a breath either way. */
    animation-duration: calc(var(--lotics-duration-slow) * 6);
    animation-timing-function: var(--lotics-ease-standard);
    animation-iteration-count: infinite;
  }

  /* An INFINITE animation is what the duration tokens cannot retime: collapsed
     to 1ms the pulse strobes instead of stopping — see docs/theming.md §2.3. */
  @media (prefers-reduced-motion: reduce) {
    .lotics-skeleton {
      animation: none;
    }
  }

  @keyframes lotics-skeleton-pulse {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.6;
    }
  }
}