.tick-toggle-button{--non-active-color:var(--color-background-box);--knob-padding:2px;--knobs-size:2.2em;border-radius:100px;width:3.6em;height:1.9em;position:relative;overflow:hidden}html:not([data-theme=dark]) .tick-toggle-button:hover .layer{--filter-us7tnjq:brightness(.95)}html[data-theme=dark] .tick-toggle-button:hover .layer{--filter-us7tnjq:brightness(.5)}.tick-toggle-button:hover .layer{filter:var(--filter-us7tnjq)}.tick-toggle-button.small{font-size:var(--x-small-font-size)}.tick-toggle-button.medium{font-size:var(--small-font-size)}.tick-toggle-button.large{font-size:var(--normal-font-size)}.tick-toggle-button .checkbox{opacity:0;cursor:pointer;z-index:3;width:100%;height:100%;position:relative}.tick-toggle-button .knobs,.tick-toggle-button .layer{transition:left .3s,background-color .3s;position:absolute;inset:0}.tick-toggle-button .knobs{z-index:2}.tick-toggle-button .layer{z-index:1;background-color:var(--color-border);width:100%}.tick-toggle-button .knobs-before{z-index:2;top:var(--knob-padding);left:var(--knob-padding);width:var(--knobs-size);height:var(--knobs-size);fill:var(--color-text-inverse);color:var(--color-text-inverse);background-color:var(--color-background-box);text-align:center;border-radius:50%;justify-content:center;align-items:center;font-size:.7em;font-weight:700;line-height:1;transition:left .3s,background-color .3s;display:flex;position:absolute}.tick-toggle-button .checkbox:checked~.knobs-before{left:calc(100% - var(--knobs-size) - var(--knob-padding));background-color:var(--active-color)}