.switch-widget{--switch-track-width:50px;--switch-track-height:24px;--switch-off-track-background:var(--more-accented-background-color);--switch-on-track-background:var(--main-text-color);--switch-thumb-width:16px;--switch-thumb-height:16px;--switch-off-thumb-background:var(--main-background-color);--switch-on-thumb-background:var(--main-background-color);align-items:center;display:flex}.switch-widget .switch-button{width:var(--switch-track-width);height:var(--switch-track-height);background-color:var(--switch-off-track-background);border-radius:24px;margin-inline-start:8px;transition:background .2s ease-in;display:block;position:relative}.switch-widget .switch-button.disable-transitions,.switch-widget .switch-button.disable-transitions:after{transition:none!important}.switch-widget .switch-button.on{background:var(--switch-on-track-background);transition:background .1s ease-out}.switch-widget .switch-button:after{--y:calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);--x:var(--y);content:"";width:var(--switch-thumb-width);height:var(--switch-thumb-height);background-color:var(--switch-off-thumb-background);transform:translate(var(--x), var(--y));top:0;border-radius:50%;transition:transform .6s cubic-bezier(.22,1,.36,1),background .2s ease-out;position:absolute;inset-inline-start:0}body[dir=rtl] .switch-widget .switch-button:after{--x:calc(var(--y) * -1)}.switch-widget .switch-button.on:after{--x:calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));background:var(--switch-on-thumb-background);transition:transform .2s cubic-bezier(.64,0,.78,0),background .1s ease-in}body[dir=rtl] .switch-widget .switch-button.on:after{--x:calc((var(--switch-track-width) - var(--switch-thumb-width) - var(--y)) * -1)}.switch-widget .switch-button input[type=checkbox]{opacity:0;top:0;width:100%;height:100%;position:absolute;inset-inline-start:0}.switch-widget .switch-button:not(.disabled) input[type=checkbox],.switch-widget .switch-button:not(.disabled){cursor:pointer}.switch-widget .switch-button:has(input[type=checkbox]:focus-visible){outline:2px solid var(--button-border-color);outline-offset:2px}.switch-widget .switch-button.disabled{opacity:.7}.switch-widget .switch-help-button{cursor:pointer;color:var(--muted-text-color);background:0 0;border:0;margin-inline-start:4px;font-size:1.1em}.switch-widget .switch-help-button:hover{color:var(--main-text-color)}
