@layer components {
  .spinner {
    @apply inline-block h-6 w-6 shrink-0 rounded-full;
    /* currentColor track (not --shadow-color, which the flat theme doesn't
       define — an undefined var there voids the whole border shorthand) */
    border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: var(--primary);
    animation: spinner-spin 0.7s linear infinite;
  }

  /* sizes are standalone (share the element with .spinner, not nested under it)
     — some call sites use spinner-xs on its own, e.g. ThunkPending */
  .spinner-sm {
    @apply h-4 w-4 border-1;
  }

  .spinner-xs {
    @apply h-3 w-3 border-1;
  }
}

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