_switch.scss

/*------------------------------------*\
    #SWITCH
\*------------------------------------*/

/*
<label class="switch">
    <input type="checkbox" class="switch__checkbox" name="switch">
    <span class="switch__mask"></span>
</label>
*/

.switch__checkbox {
    display: none;
}

    .switch__mask {
        background-color: #fff;
        border-radius: 100px;
        border: 1px solid $base-ui-color;
        cursor: pointer;
        display: inline-block;
        height: $base-spacing-unit * 1.5;
        width: $base-spacing-unit * 3;

        &:after {
            background-color: $base-ui-color;
            border-radius: 100px;
            border: 3px solid #fff;
            content: "";
            display: block;
            height: 100%;
            width: 50%;
            transition: 250ms;
        }
    }

    .switch__checkbox:checked + .switch__mask {
        &:after {
            transform: translateX(100%);
            background-color: #9ACD77;
        }
    }