htmlとcssだけで切り替え式のスイッチを作る方法

html

<label class='switch'>
       <input class='switch-checkbox' type='checkbox'>
       <div class='switch-unchecked'>OFF</div>
       <div class='switch-checked'>ON</div>
</label>

SCSSS

.switch {
    display: inline-flex;

    width: 200px;
    background-color: #FFFFFF;
    border: solid 1px #000000;
    user-select: none;
    -webkit-touch-callout: none;

    .switch-checkbox {
        display: none;
    }
    .switch-checked,.switch-unchecked{
        flex-grow: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .switch-checkbox:checked~.switch-checked,
    .switch-checkbox:not(:checked)~.switch-unchecked {
        background-color: red;
    }
}