/* =============================================
   Loading Spinner Component — UI-0075
   ============================================= */

/* --- Base Spinner --- */
.spinner {
  display: inline-block;
  border-style: solid;
  border-color: var(--border-muted, #EEF1F5);
  border-top-color: var(--color-electric, #2F80ED);
  border-radius: var(--radius-full);
  animation: spin var(--duration-normal, 0.8s) linear infinite;
  flex-shrink: 0;
}

/* --- Size Variants --- */

/* Small: 16px */
.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Medium (default): 20px */
.spinner--md,
.spinner:not(.spinner--sm):not(.spinner--lg) {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* Large: 32px */
.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

/* --- Color Variants --- */

/* White spinner (for use on colored/dark backgrounds) */
.spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white, #FFFFFF);
}

/* Muted spinner */
.spinner--muted {
  border-color: var(--border-muted, #EEF1F5);
  border-top-color: var(--text-muted, #B0BAC5);
}

/* --- Centered Spinner Wrapper --- */
.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-8);
}

.spinner-wrap--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  width: auto;
}

.spinner-wrap__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted, #B0BAC5);
}

/* --- Keyframe --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   Spinner — Mobile Responsive
   ============================================= */
@media (max-width: 639px) {
  .spinner {
    max-width: 100%;
  }
}