/* Safari 17.x bug: `:scope[attr]:hover` (Flavor A) and `:scope[checked]`
   token-block (Flavor B — attribute-removal restyle) both fail inside
   `@scope`. Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
switch-ui:not([disabled]):hover {
  --switch-track-bg-default: var(--switch-track-bg-hover, var(--switch-track-bg-hover-default));
  --switch-track-border-default: var(--switch-track-border-hover, var(--switch-track-border-hover-default));
}
switch-ui[checked]:not([disabled]):hover {
  --switch-track-bg-default: var(--switch-track-bg-checked-hover, var(--switch-track-bg-checked-hover-default));
  --switch-track-border-default: var(--switch-track-border-checked-hover, var(--switch-track-border-checked-hover-default));
}
switch-ui[checked] {
  --switch-track-bg-default: var(--switch-track-bg-checked, var(--switch-track-bg-checked-default));
  --switch-track-border-default: var(--switch-track-border-checked, var(--switch-track-border-checked-default));
  --switch-thumb-bg-default: var(--switch-thumb-bg-checked, var(--switch-thumb-bg-checked-default));
}
switch-ui[checked] [slot="thumb"] {
  transform: translateX(var(--switch-thumb-travel, var(--switch-thumb-travel-default)));
}

@scope (switch-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --switch-gap-default:                  var(--a-space-2);
    --switch-radius-default:               var(--a-radius-full);

    /* ── Typography ── */
    --switch-font-size-default:            var(--a-ui-size);

    /* ── Colors ── */
    --switch-track-bg-hover-default:       var(--a-bg-muted);
    --switch-track-bg-checked-hover-default: var(--a-primary-hover);
    --switch-track-border-checked-hover-default: var(--a-primary-hover);
    --switch-thumb-shadow-default:         var(--a-shadow-sm);

    /* ── Transition ── */
    --switch-duration-default:             var(--a-duration-fast);
    --switch-easing-default:               var(--a-easing);

    /* ── Focus ── */
    --switch-focus-ring-default:           var(--a-focus-ring);

    /* ── Track ── (sizes scale with universal [size] attribute via --a-toggle-size) */
    --switch-track-height-default:         var(--a-toggle-size);
    --switch-track-width-default:          calc(var(--a-toggle-size) * 1.8);
    --switch-track-bg-default:             var(--a-ui-bg);
    --switch-track-border-default:         var(--a-ui-border);
    --switch-track-border-hover-default:   var(--a-fg-subtle);

    /* ── Track: checked ── */
    --switch-track-bg-checked-default:     var(--a-primary);
    --switch-track-border-checked-default: var(--a-primary);

    /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
    --switch-thumb-inset-default:          2px;
    --switch-thumb-size-default:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset, var(--switch-thumb-inset-default)) - 2px); /* -2px for 1px border each side */
    --switch-thumb-bg-default:             var(--a-fg-muted);
    --switch-thumb-bg-checked-default:     var(--a-chrome-light);
    --switch-thumb-travel-default:         calc(var(--switch-track-width, var(--switch-track-width-default)) - var(--switch-thumb-size, var(--switch-thumb-size-default)) - 2 * var(--switch-thumb-inset, var(--switch-thumb-inset-default)) - 2px);

    /* ── State: disabled ── */
    --switch-fg-disabled-default:          var(--a-ui-text-disabled);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--switch-gap, var(--switch-gap-default));
    cursor: pointer;
    user-select: none;
    font-size: var(--switch-font-size, var(--switch-font-size-default));
  }
  :scope[disabled] { cursor: not-allowed; color: var(--switch-fg-disabled, var(--switch-fg-disabled-default)); }

  [slot="track"] {
    position: relative;
    width: var(--switch-track-width, var(--switch-track-width-default));
    height: var(--switch-track-height, var(--switch-track-height-default));
    border-radius: var(--switch-radius, var(--switch-radius-default));
    background: var(--switch-track-bg, var(--switch-track-bg-default));
    border: 1px solid var(--switch-track-border, var(--switch-track-border-default));
    flex-shrink: 0;
    transition:
      background var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default)),
      border-color var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default));
  }
  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */

  [slot="thumb"] {
    position: absolute;
    top: var(--switch-thumb-inset, var(--switch-thumb-inset-default));
    left: var(--switch-thumb-inset, var(--switch-thumb-inset-default));
    width: var(--switch-thumb-size, var(--switch-thumb-size-default));
    height: var(--switch-thumb-size, var(--switch-thumb-size-default));
    border-radius: var(--switch-radius, var(--switch-radius-default));
    background: var(--switch-thumb-bg, var(--switch-thumb-bg-default));
    box-shadow: var(--switch-thumb-shadow, var(--switch-thumb-shadow-default));
    transition:
      transform  var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default)),
      background var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default));
  }
  /* :scope[checked] [slot="thumb"] moved outside @scope — see Safari 17.x bug note at top. */

  [slot="label"] { font-size: var(--switch-font-size, var(--switch-font-size-default)); }

  /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
     Caption beneath the toggle row; wired to aria-describedby on host. */
  [slot="hint"] {
    display: block;
    margin-top: var(--switch-hint-mt, var(--a-space-1));
    font-size: var(--switch-hint-size, var(--a-ui-xs));
    color: var(--switch-hint-fg, var(--a-fg-muted));
    line-height: var(--switch-hint-lh, 1.4);
  }

  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring, var(--switch-focus-ring-default)); }

  /* Size handled by universal [size] attribute system. */
}
