/* Spinner: attesa di durata ignota, su un <progress> senza valore (i lettori di schermo lo annunciano da soli).
   Prende il colore dal testo del contenitore; dimensione con --spinner-size. Markup in components/spinner.html. */
@layer components {
  progress.spinner {
    --spinner-size: 40px;
    --spinner-thickness: 3px;
    --_duration: .9s;

    display: inline-block;
    width: var(--spinner-size);
    height: var(--spinner-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    color: inherit;
    background: conic-gradient(from 0deg, currentColor 110deg, color-mix(in srgb, currentColor 22%, transparent) 0);
    mask-image: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--spinner-thickness) - .5px),
      #000 calc(100% - var(--spinner-thickness))
    );
    animation: spinner-turn var(--_duration) linear infinite;

    &.sm { --spinner-size: 20px; --spinner-thickness: 2px; }
    &.lg { --spinner-size: 56px; --spinner-thickness: 4px; }

    /* La barra del browser non deve comparire */
    &::-webkit-progress-bar,
    &::-webkit-progress-value { background: none; }
    &::-moz-progress-bar { background: none; }
  }
  /* Piu' lento, non fermo: deve restare chiaro che sta caricando */
  @media (prefers-reduced-motion: reduce) {
    progress.spinner { --_duration: 6s; }
  }
  @keyframes spinner-turn { to { rotate: 1turn; } }
}