@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 share the element with .spinner rather than nesting under it, and only override its
     dimensions — the shape, colour and animation all come from .spinner, so a size on its own
     renders as a bordered box */
  .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);
  }
}