.toggler{--circle-size:18px;--padding:4px;--checked-color:var(--primary);--initial-color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:12px}.toggler__label{display:block;flex-shrink:0;width:calc(var(--circle-size)*2 + var(--padding)*2);height:calc(var(--circle-size) + var(--padding)*2);border-radius:calc(var(--circle-size));background-color:var(--initial-color);border:1px solid var(--grey);padding:3px;cursor:pointer;transition:background-color .2s linear,border-color .2s linear}@media(hover:hover){.toggler__label:hover{border-color:var(--checked-color)}.toggler__label:hover .toggler__circle{background-color:var(--checked-color)}}.toggler__label:has(input:checked){background-color:var(--checked-color);border-color:var(--checked-color)}.toggler__label:has(input:checked) .toggler__circle{background-color:#fff}.toggler__label input:checked+.toggler__circle{transform:translate(100%)}.toggler__circle{display:block;width:var(--circle-size);aspect-ratio:1/1;border-radius:50%;box-shadow:0 1px 2px #0000001c;background-color:#757575;transition:background-color .2s linear,transform .2s linear}