.toggle-field{--toggle-field--background-color:hsla(var(--color--foreground--hsl),0.45);--toggle-field--icon-color:var(--color--foreground);--toggle-field--indicator-color:var(--color--white);--toggle-field--indicator-diameter:1.6em;--toggle-field--indicator-offset:0.3em;--toggle-field--background-color--on:var(--color--green);--toggle-field--icon-color--on:var(--color--black);--toggle-field--indicator-color--on:var(--color--white);align-items:center;cursor:pointer;display:flex;flex-wrap:wrap;gap:1ch;margin:0 auto;position:relative}.toggle-field__indicator{align-items:center;background-color:var(--toggle-field--background-color);border-radius:100vw;color:var(--toggle-field--icon-color);display:inline-flex;flex:0 0 auto;height:calc(var(--toggle-field--indicator-diameter) + var(--toggle-field--indicator-offset)*2);justify-content:space-around;margin:2px;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:calc(var(--toggle-field--indicator-diameter)*2 + var(--toggle-field--indicator-offset)*2)}@media (prefers-reduced-motion:no-preference){.toggle-field__indicator{transition:background-color .25s,color .25s,transform .25s}}.toggle-field__indicator:before{background-color:var(--toggle-field--indicator-color);border-radius:100%;content:"";height:var(--toggle-field--indicator-diameter);left:var(--toggle-field--indicator-offset);position:absolute;top:50%;transform:translateY(-50%);transition:inherit;width:var(--toggle-field--indicator-diameter);z-index:1}.toggle-field__indicator svg{height:40%;margin:auto}.toggle-field__indicator svg [fill]{fill:currentColor;color:currentColor}.toggle-field [type=checkbox]{height:100%;opacity:0;position:absolute;width:100%}.toggle-field [type=checkbox]:checked+.toggle-field__indicator{--toggle-field--background-color:var(--toggle-field--background-color--on);--toggle-field--icon-color:var(--toggle-field--icon-color--on);--toggle-field--indicator-color:var(--toggle-field--indicator-color--on)}.toggle-field [type=checkbox]:checked+.toggle-field__indicator:before{background-position:50%;background-repeat:no-repeat;transform:translate(100%,-50%)}.toggle-field [type=checkbox]:focus+.toggle-field__indicator,.toggle-field:focus .toggle-field__indicator{outline:3px solid var(--color--foreground);outline-offset:2px}.toggle-field [type=checkbox]:focus:not(:focus-visible)+.toggle-field__indicator,.toggle-field:focus,.toggle-field:focus:not(:focus-visible) .toggle-field__indicator{outline:0}