/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

@layer theme {
  .slds-checkbox_toggle {
    /* Track sizing */
    --slds-c-checkboxtoggle-sizing-width: var(--slds-g-sizing-10);
    --slds-c-checkboxtoggle-sizing-height: var(--slds-g-sizing-7);
    --slds-c-checkboxtoggle-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-checkboxtoggle-radius-border: var(--slds-g-radius-border-pill);
    --slds-c-checkboxtoggle-spacing: var(--slds-g-spacing-1);

    /* Track surface — idle */
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-neutral-base-60);
    --slds-c-checkboxtoggle-color-border: var(--slds-g-color-neutral-base-60);
    --slds-c-checkboxtoggle-shadow: var(--slds-s-mark-shadow-checked);
    --slds-c-checkboxtoggle-shadow-focus: var(--slds-g-shadow-outset-focus-1);

    /* Switch knob */
    --slds-c-checkboxtoggle-switch-size: var(--slds-g-sizing-6);
    --slds-c-checkboxtoggle-switch-color-background: var(--slds-g-color-on-accent-1);

    /* Mark (checkmark when on) */
    --slds-c-checkboxtoggle-mark-color-foreground: var(--slds-g-color-on-accent-1);
    --slds-c-checkboxtoggle-mark-sizing-border: var(--slds-g-sizing-border-2);

    /* Label */
    --slds-c-checkboxtoggle-label-color-foreground: var(--slds-g-color-on-surface-1);
    --slds-c-checkboxtoggle-label-font-size: var(--slds-g-font-scale-neg-2);
  }

  /* Hover/focus on the track — out-of-carveout pseudo-state, so we
     reassign canonical hooks from inside the selector. */
  .slds-checkbox_toggle .slds-checkbox_faux:hover,
  .slds-checkbox_toggle .slds-checkbox_faux:focus {
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-neutral-base-50);
    --slds-c-checkboxtoggle-color-border: var(--slds-g-color-neutral-base-50);
  }

  /* Focus-visible: the canonical-state carveout's `-focus` suffix
     applies; base reads `--slds-c-checkboxtoggle-shadow-focus`
     directly inside `:focus-visible`. */
  .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:focus-visible ~ .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux_container .slds-checkbox_faux {
    --slds-c-checkboxtoggle-shadow: var(--slds-c-checkboxtoggle-shadow-focus);
  }

  /* Checked: brand surface. */
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux {
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-accent-container-1);
    --slds-c-checkboxtoggle-color-border: var(--slds-g-color-border-accent-1);
  }

  /* Checked + hover/focus on the track. */
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:hover,
  .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:hover,
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover,
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:focus,
  .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:focus,
  .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus {
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-accent-container-2);
    --slds-c-checkboxtoggle-color-border: var(--slds-g-color-border-accent-2);
    --slds-c-checkboxtoggle-switch-color-background: var(--slds-g-color-on-accent-2);
    --slds-c-checkboxtoggle-mark-color-foreground: var(--slds-g-color-on-accent-2);
  }

  /* Checked + focused track. */
  .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:checked:focus ~ .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux {
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-accent-container-2);
    --slds-c-checkboxtoggle-switch-color-background: var(--slds-g-color-on-accent-2);
    --slds-c-checkboxtoggle-mark-color-foreground: var(--slds-g-color-on-accent-2);
  }

  /* Disabled. */
  .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox'][disabled] ~ .slds-checkbox_faux,
  .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux {
    --slds-c-checkboxtoggle-color-background: var(--slds-g-color-disabled-container-2);
    --slds-c-checkboxtoggle-color-border: var(--slds-g-color-border-disabled-1);
    --slds-c-checkboxtoggle-switch-color-background: var(--slds-g-color-on-disabled-2);
    --slds-c-checkboxtoggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
  }

  .slds-checkbox_toggle
    [type='checkbox']:checked[disabled]
    + .slds-checkbox_faux_container
    .slds-checkbox_faux {
    --slds-c-checkboxtoggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
  }
}