.cursor-pointer *{cursor:pointer}.my-checkbox label{padding-left:.625rem;padding-top:0}input[type=checkbox]{margin-left:.625rem}.Toggle{align-items:center;cursor:pointer;display:flex;flex-wrap:nowrap;gap:1ch;position:relative}.Toggle__input{height:100%;opacity:0;position:absolute;width:100%}.Toggle__display{--diameter:1.8em;--offset:.25em;align-items:center;border:.1em solid rgba(0,0,0,.2);border-radius:100vw;box-sizing:content-box;display:inline-flex;height:calc(var(--diameter) + var(--offset)*2);justify-content:space-around;position:relative;transition:.25s;width:calc(var(--diameter)*2 + var(--offset)*2)}.Toggle__display:before{background-color:#fff;border:.1em solid rgba(0,0,0,.2);border-radius:50%;box-sizing:border-box;content:"";height:var(--diameter);left:var(--offset);position:absolute;top:50%;transform:translateY(-50%);transition:inherit;width:var(--diameter);will-change:transform;z-index:2}.Toggle:focus .Toggle__display,.Toggle:focus:not(:focus-visible) .Toggle__display,.Toggle__input:focus+.Toggle__display,.Toggle__input:focus:not(:focus-visible)+.Toggle__display{outline:1px dotted #212121;outline:1px auto -webkit-focus-ring-color;outline-offset:2px}.Toggle:focus,.Toggle:focus:not(:focus-visible) .Toggle__display,.Toggle__input:focus,.Toggle__input:focus:not(:focus-visible)+.Toggle__display{outline:0}.Toggle__input:checked+.Toggle__display:before{transform:translate(100%) translateY(-50%)}.Toggle[disabled] .Toggle__display,.Toggle__input:disabled+.Toggle__display{cursor:not-allowed;filter:grayscale(40%);opacity:.6}.my-checkbox .Toggle__icon{fill:currentcolor;color:inherit;display:inline-block;font-size:calc(var(--diameter)/2);height:1em;overflow:hidden;vertical-align:middle;width:1em}.my-checkbox *,.my-checkbox :after,.my-checkbox :before{box-sizing:border-box}
