/* ==========================================================================
   ATOMS / spinner / spinner.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <span class="spinner" role="status" aria-label="Loading"></span>
     <span class="spinner spinner-sm spinner-brand" role="status" aria-label="Loading"></span>

   Overlay (di tengah parent relatif):
     <div style="position:relative">
       <div class="spinner-overlay">
         <span class="spinner spinner-brand"></span>
       </div>
       ...konten...
     </div>
   ========================================================================== */

.spinner {
  display:       inline-block;
  flex-shrink:   0;
  width:         var(--size-icon-lg);    /* 24px default */
  height:        var(--size-icon-lg);
  border:        2.5px solid var(--color-border-default);
  border-top-color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  animation:     ds-spin 0.65s linear infinite;
}

/* Sizes */
.spinner-xs  { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-sm  { width: 16px; height: 16px; border-width: 2px; }
.spinner-md  { width: 24px; height: 24px; border-width: 2.5px; }
.spinner-lg  { width: 32px; height: 32px; border-width: 3px; }
.spinner-xl  { width: 48px; height: 48px; border-width: 4px; }

/* Color variants */
.spinner-brand   { border-color: var(--color-brand-subtle);   border-top-color: var(--color-brand); }
.spinner-white   { border-color: rgba(255,255,255,0.25);      border-top-color: white; }
.spinner-success { border-color: var(--color-success-subtle); border-top-color: var(--color-success); }
.spinner-error   { border-color: var(--color-error-subtle);   border-top-color: var(--color-error); }
.spinner-muted   { border-color: var(--color-bg-sunken);      border-top-color: var(--color-text-disabled); }

/* Overlay — spinner di tengah parent yang di-overlay */
.spinner-overlay {
  position:         absolute;
  inset:            0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--color-bg-overlay);
  border-radius:    inherit;
  z-index:          var(--z-raised);
}