@layer components{.switch{--switch-track-width:3.25rem;--switch-inset:.1875rem;--switch-thumb:1.125rem;gap:var(--space-2xs);flex-direction:column;display:flex}.switch .switch-button{font-size:clamp(var(--text-xs), var(--stage-unit) * 1.7, 1rem);letter-spacing:.005em;color:var(--ink-muted);cursor:pointer;align-items:center;gap:var(--space-xs);font-weight:700;display:inline-flex}.switch .switch-button[data-hovered],.switch .switch-button[data-pressed],.switch .switch-button[data-selected]{color:var(--ink)}.switch .switch-button[data-selected] .track{background:var(--ink);border-color:var(--ink)}.switch .switch-button[data-selected] .thumb{background:var(--field);transform:translateX(calc(var(--switch-track-width) - 2 * (var(--stroke-thin) + var(--switch-inset)) - var(--switch-thumb)))}.switch .switch-button[data-focus-visible] .track,.switch .switch-button:focus-visible .track{outline:3px solid var(--ink);outline-offset:3px}.switch .switch-button[data-disabled]{cursor:not-allowed}.switch .track{border:var(--stroke-thin) solid var(--ink-muted);border-radius:var(--radius-full);height:1.75rem;padding:var(--switch-inset);transition:background var(--transition-fast,0s), border-color var(--transition-fast,0s);width:var(--switch-track-width);display:inline-flex}.switch .thumb{background:var(--ink-muted);border-radius:var(--radius-full);height:var(--switch-thumb);transition:transform var(--transition-fast,0s) var(--ease-out), background var(--transition-fast,0s);width:var(--switch-thumb)}.switch .description{font-size:clamp(var(--text-xs), var(--stage-unit) * 1.8, 1rem);color:var(--ink-muted);text-wrap:pretty;padding-inline-start:calc(var(--switch-track-width) + var(--space-xs));font-weight:500;line-height:1.35}.switch[data-disabled]{opacity:.4}}