.switch{cursor:pointer;background:#00000040;border-radius:8px;width:56px;height:28px;display:flex;position:relative;overflow:hidden}.switch__option{z-index:2;-webkit-user-select:none;user-select:none;flex:1;justify-content:center;align-items:center;font-size:14px;display:flex}.switch__thumb{z-index:1;background:#fff;border-radius:6px;width:50%;height:100%;transition:transform .25s;position:absolute;top:0;left:0}.switch--active .switch__thumb{transform:translate(100%)}@media (max-width:640px){.switch{width:56px;height:28px}.switch__thumb{width:24px;height:24px;top:2px;left:2px}.switch--active .switch__thumb{transform:translate(28px)}.switch__option{font-size:12px}}