@layer components {
  .toggle-switch {
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-surface-light-highest);

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

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

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

  .toggle-switch-label {
    background-color: var(--color-surface-light-high);
    color: var(--color-neutral-600);

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