/* Measurements are data, so properties rather than inline declarations beatable only by `!important`.
   `flex-shrink: 0` is the contract: a shrinking tile reserves less than what arrives. */
@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;
    /* 1440ms, a breath either way. */
    animation-duration: calc(var(--lotics-duration-slow) * 6);
    animation-timing-function: var(--lotics-ease-standard);
    animation-iteration-count: infinite;
  }

  /* The duration tokens cannot retime an infinite animation: at 1ms it strobes (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;
    }
  }
}