/**
 * hx-spinner.css — Spinner SSOT
 * Token-driven only. No fallbacks. No !important.
 * 4-variant via data-theme + data-hx-vp. Colors via currentColor from semantic tokens.
 */
.hx-spinner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--hx-fg);
}

.hx-spinner__disc {
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: hx-spin 0.8s linear infinite;
}

.hx-spinner__label {
  font-size: var(--text-caption-size);
  color: var(--hx-fg-muted);
}

/* Sizes */
.hx-spinner--sm .hx-spinner__disc {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.hx-spinner--md .hx-spinner__disc {
  width: 32px;
  height: 32px;
  border-width: 2.5px;
}
.hx-spinner--lg .hx-spinner__disc {
  width: 48px;
  height: 48px;
  border-width: 3px;
}

/* Color variants — set currentColor so disc tracks semantic token */
.hx-spinner--default { color: var(--hx-fg); }
.hx-spinner--cobalt { color: var(--hx-primary); }
.hx-spinner--cherry { color: var(--hx-danger); }
.hx-spinner--forest { color: var(--hx-success); }
.hx-spinner--grayscale { color: var(--hx-fg-muted); }
.hx-spinner--white { color: var(--hx-on-primary); }

/* Grouped multi-example (Sizes etc.) — increased vertical space */
.hx-spinner-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: 140px;
  padding: var(--spacing-6) 0;
}

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

/* 4-variant readiness — tokens flip automatically */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* pure token / currentColor */
}