@layer shared{.toggle{--padding:4px;--width:40px;--height:24px;--bg-color:var(--v2-neutral-500);--bg-selected:var(--v2-green-500);--bg-disabled:var(--v2-neutral-300);--color:var(--v2-shades-50);--color-disabled:var(--v2-neutral-100);--toggle-size:calc(var(--height) - (2 * var(--padding)));position:relative;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--width);height:var(--height);padding:var(--padding);border-radius:var(--border-radius-lg);background:var(--bg-color);margin:0}.toggle:not(:disabled){cursor:pointer}.toggle:before{content:"";position:absolute;top:var(--padding);left:var(--padding);width:var(--toggle-size);height:var(--toggle-size);border-radius:50%;background:var(--color);transition:translate .2s}.toggle:checked{background-color:var(--bg-selected)}.toggle:checked:before{translate:var(--toggle-size)}.toggle:disabled{background:var(--bg-disabled)}.toggle:disabled:before{background:var(--color-disabled)}}