button.on-off-switch{position:relative;display:inline-grid;grid-template-columns:repeat(2,1fr);flex-shrink:0;gap:3px;padding:4px;border:0;border-radius:999px;cursor:pointer}button.on-off-switch,button.on-off-switch:hover:not(:disabled){background:var(--ui-hover,#f3f3f3)}.on-off-switch:before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 11px) / 2);border-radius:999px;background:var(--ui-surface,#fff);box-shadow:0 1px 4px #00000012;pointer-events:none;transform:translateX(0);transition:transform .22s cubic-bezier(.22,1,.36,1)}.on-off-switch[data-state=on]:before{transform:translateX(calc(100% + 3px))}.on-off-switch-option{position:relative;display:grid;place-items:center;min-width:48px;min-height:32px;padding:0 10px;box-sizing:border-box;border-radius:999px;font-size:12px;font-weight:500;color:var(--ui-muted,#777);transition:color .15s}.on-off-switch-option[data-selected=true],.on-off-switch:hover:not(:disabled) .on-off-switch-option{color:var(--ui-ink,#292929)}button.on-off-switch:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:3px}button.on-off-switch:disabled{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.on-off-switch-option,.on-off-switch:before{transition:none}}