/*
 * ATOM: Spinner — indicador de carga inline
 * Uso:
 *   <span class="spinner"></span>            (14px, dentro de botones)
 *   <span class="spinner spinner-lg"></span> (24px, dentro de páginas)
 *   <span class="spinner spinner-xl"></span> (40px, cargas de pantalla entera)
 *   <span class="spinner-xs"></span>         (10px, hereda el color del texto)
 *
 * `.spinner-xs` funciona SOLO, sin `.spinner` al lado, porque asi se escribio
 * en las seis pantallas que ya lo usan (venia de una copia suelta en
 * molecules/form.css). El selector de abajo lo contempla a proposito: si se
 * exigiera el par, esos seis spinners desaparecerian sin ningun error.
 */

.spinner,
.spinner-xs {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--h-hairline);
  border-top-color: var(--h-brand-primary);
  border-radius: 50%;
  animation: spinner-rotate var(--h-dur-giro) linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

.spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
.spinner-xl { width: 40px; height: 40px; border-width: 4px; }

/* El chico hereda el color del texto de al lado: va dentro de un
 * `.field-hint.is-loading`, donde el mensaje entero ya esta pintado del color
 * que corresponde y un giro de otro color se leeria como un segundo aviso. */
.spinner-xs {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  border-top-color: currentColor;
}

.spinner-light {
  border-color: color-mix(in srgb, var(--h-brillo) 35%, transparent);
  border-top-color: var(--h-surface);
}

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

/* Con movimiento reducido no se apaga: un spinner quieto es un circulo roto,
 * no un "esperando". Se afloja al doble de lento. (La regla global de
 * tokens.css corta las animaciones a 0.01ms con una sola repeticion; esta gana
 * por ser mas especifica que el `*` de aquella.) */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .spinner-xs { animation-duration: calc(var(--h-dur-giro) * 2) !important; animation-iteration-count: infinite !important; }
}