/*
    Usage:
    <label class="switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <span class="slider round"></span>
        <span class="switch-text">Text</span>
    </label>
*/

.switch {
    position: relative;
    display: block;
    height: 1.5rem;
    cursor: pointer;
}

    .switch input {
        display: none;
    }

.switch-text {
    position: absolute;
    left: 3rem;
    width: max-content;
}

.slider {
    background-color: var(--gray-1);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 2.5rem;
    transition: .4s;
}

    .slider:before {
        background-color: #fff;
        top: 0.25rem;
        content: "";
        height: 1rem;
        left: 0.25rem;
        position: absolute;
        transition: .4s;
        width: 1rem;
    }

input:checked + .slider {
    background-color: var(--green);
}

    input:checked + .slider:before {
        transform: translateX(1rem);
    }

.slider.round {
    border-radius: 1rem;
}

    .slider.round:before {
        border-radius: 50%;
    }