/*
 * FB-04 Loading / spinner — app/components/ui/spinner_component.rb
 *
 * Rotation matches the pattern already established for F-01 Button's
 * inline spinner (see button.css) so the two read identically: a rotating
 * ring under normal motion, a static pulsing dot under reduced-motion.
 */

.ui-spinner {
  display: inline-flex;
  color: currentColor;
}

.ui-spinner__svg {
  animation: ui-spin var(--duration-spin) linear infinite;
}

.ui-spinner__dot {
  display: none;
}

/*
 * Shared rotation keyframe for every spin animation in the component
 * library (button, listbox, toast, autosave field, search field, filter
 * tab bar all point at this rather than each declaring an identical
 * `to { transform: rotate(360deg) }` block).
 */
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-spinner__svg {
    animation: none;
  }

  .ui-spinner__ring {
    display: none;
  }

  .ui-spinner__dot {
    display: block;
  }
}