@layer components {
  .spinner {
    width: 1rem;
    height: 1rem;
    animation: spinner-rotate 1s linear infinite;
    color: var(--muted-foreground);
    flex-shrink: 0;

    &[data-size="sm"] {
      width: 0.875rem;
      height: 0.875rem;
    }

    &[data-size="md"] {
      width: 1.25rem;
      height: 1.25rem;
    }

    &[data-size="lg"] {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components — AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .spinner,
    .spinner *,
    .spinner::before,
    .spinner::after,
    .spinner *::before,
    .spinner *::after,
    .spinner::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}