/* Spinner — индикатор асинхронного процесса.
   Дуга 270° (round-cap), геометрия из мастер-компонента Figma (viewBox 0 0 44 44,
   R=17.6, stroke-width=2.8 — пропорция сохраняется при масштабировании).
   Цвет дуги наследуется от `color` родителя через currentColor:
     - обычный (на светлом фоне)  → --color-accent-400
     - inverted (на тёмном фоне)  → --color-gray-0
   Размер задаётся модификатором (width/height), stroke масштабируется вместе с viewBox. */

.spinner {
  display: inline-block;
  color: var(--color-accent-400);
  line-height: 0;
}

.spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

.spinner path {
  stroke: currentColor;
}

/* Инвертированный — для тёмного фона */
.spinner--inverted {
  color: var(--color-gray-0);
}

/* Размеры (Size из Figma) */
.spinner--xs { width: 16px; height: 16px; }
.spinner--sm { width: 24px; height: 24px; }
.spinner--md { width: 32px; height: 32px; }
.spinner--lg { width: 44px; height: 44px; }

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

/* Уважение к prefers-reduced-motion + детерминированная статика для сверки */
.spinner--static svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spinner svg { animation: none; }
}