@layer components {
  .toggle-switch-label {
    background-color: var(--color-surface-light);

    &:has(button[aria-checked="true"]) {
      background-color: var(--color-brand-primary);
      color: var(--color-white);
    }
  }

  .toggle-switch {
    .toggle-switch-knob {
      background-color: var(--color-brand-primary);
    }

    [aria-checked="true"] > & {
      background-color: var(--color-surface-light);
    }
  }
}