/* Switch · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: Switch. */
/* base.css */
.switch{position:relative;display:inline-block;width:36px;height:20px;border-radius:var(--r-pill);background:hsl(var(--input));flex:none;cursor:pointer;transition:background-color var(--motion-hover),box-shadow var(--motion-focus)}
/* base.css */
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:hsl(var(--background));box-shadow:var(--e-btn-2);transition:transform var(--motion-pop-in)}
/* base.css */
.switch[aria-checked=true]{background:hsl(var(--primary))}
/* base.css */
.switch[aria-checked=true]::after{transform:translateX(16px)}
/* base.css */
.switch:hover, .switch.is-hover{background:hsl(var(--input-hover))}
/* base.css */
.switch[aria-checked=true]:hover, .switch[aria-checked=true].is-hover{background:hsl(var(--primary-hover))}
/* base.css */
.switch.is-focus, .switch:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* base.css */
.switch[disabled], .switch[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* base.css */
.switch.lock{background:hsl(var(--primary)/.45);cursor:default;opacity:1}
/* base.css */
.switch.busy::after{background:hsl(var(--background)/.85)}
/* base.css */
.kit-m .switch{width:44px;height:26px}
/* base.css */
.kit-m .switch::after{width:22px;height:22px}
/* base.css */
.kit-m .switch[aria-checked=true]::after{transform:translateX(18px)}