/* Spinner
   A spinning loading indicator. Sizes are set with data-size (sm, default,
   lg). Inherits the current text colour, or set data-tone. Add a visually
   hidden label for screen readers. Colour from tokens.css. */

.dp-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--dp-blue-200);
  border-top-color: var(--dp-primary-bg);
  border-radius: var(--dp-radius-full);
  animation: dp-spin 0.7s linear infinite;
}

.dp-spinner[data-size="sm"] {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.dp-spinner[data-size="lg"] {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

.dp-spinner[data-tone="neutral"] {
  border-color: var(--dp-neutral-300);
  border-top-color: var(--dp-text-muted);
}

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

@media (prefers-reduced-motion: reduce) {
  .dp-spinner { animation-duration: 2s; }
}