@layer theme {
  .slds-spinner_container {
    --slds-c-spinner-color-background: var(--slds-g-color-surface-container-1);
  }

  .slds-spinner {
    --slds-c-spinner-color-foreground: var(--slds-g-color-neutral-base-50);
    --slds-c-spinner-radius-border: var(--slds-g-radius-border-circle);
  }

  /**
   * Brand variant reassigns the canonical foreground hook
   */
  .slds-spinner.slds-spinner_brand {
    --slds-c-spinner-color-foreground: var(--slds-g-color-accent-1);
  }

  /**
   * Inverse variant reassigns the canonical foreground hook
   */
  .slds-spinner.slds-spinner_inverse {
    --slds-c-spinner-color-foreground: var(--slds-g-color-surface-container-1);
  }

  /* Size modifiers — overall spinner dimension and the per-dot
     pseudo-element dimension. Both reassigned at the BEM-modifier
     compound (Rule-5 carveout). */
  .slds-spinner.slds-spinner_xx-small {
    --slds-c-spinner-size: var(--slds-g-sizing-3);
    --slds-c-spinner-dot-size: 0.125rem;
  }

  .slds-spinner.slds-spinner_x-small {
    --slds-c-spinner-size: var(--slds-g-sizing-5);
    --slds-c-spinner-dot-size: var(--slds-g-sizing-2);
  }

  .slds-spinner.slds-spinner_small {
    --slds-c-spinner-size: var(--slds-g-sizing-6);
    --slds-c-spinner-dot-size: var(--slds-g-sizing-2);
  }

  .slds-spinner.slds-spinner_medium {
    --slds-c-spinner-size: var(--slds-g-sizing-9);
    --slds-c-spinner-dot-size: var(--slds-g-sizing-3);
  }

  .slds-spinner.slds-spinner_large {
    --slds-c-spinner-size: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4));
    --slds-c-spinner-dot-size: calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1));
  }
}