.switch{--track-width:44px;--track-padding:2px;color:#323f47;align-items:center;gap:.5rem;font-size:14px;font-weight:600;line-height:.85;display:flex}.switch:has(.switch__track:checked) .switch__textLeft{color:#b6bcc3}.switch:not(:has(.switch__track:checked)) .switch__textRight{color:#b6bcc3}.switch__textLeft,.switch__textRight{max-width:110px}.switch__textLeft{text-align:right}.switch__track{--thumb-position:0%;cursor:pointer;appearance:none;padding:var(--track-padding);width:var(--track-width);background-color:#54d3c2;border-radius:12px;flex-shrink:0;grid:[track]1fr/[track]1fr;align-items:center;height:24px;display:grid}.switch__track:before{content:"";width:20px;height:20px;transform:translateX(var(--thumb-position));background-color:#fff;border-radius:50%;grid-area:track;transition:transform .2s}.switch__track:checked{--thumb-position:calc(var(--track-width) - (var(--track-padding) * 2) - 100%)}