.slider {
    appearance: none;
    height: 1.2rem;
    width: 2rem;
    background-color: red;
    border-radius: 50px;
    position: relative;
    transition: 200ms;
    cursor: pointer;
    outline: none;
    border: 1px solid #000;
    flex-shrink: 0;


    &:before {
        content: "";
        position: absolute;
        height: .8rem;
        width: .8rem;
        background-color: #d5d5d5;
        border-radius: 50%;
        border: 1px solid #000;
        left: .1rem;
        top: .1rem;
        transition: 300ms;

    }

    &:checked {
        background-color: lightgreen;
    }

    &:checked:before {
        background-color: green;
        left: .9rem;

    }
}


.sliderinverse {
    appearance: none;
    height: 1.2rem;
    width: 2rem;
    background-color: lightgreen;
    border-radius: 50px;
    position: relative;
    transition: 200ms;
    cursor: pointer;
    outline: none;
    border: 1px solid #000;
    flex-shrink: 0;


    &:before {
        content: "";
        position: absolute;
        height: .8rem;
        width: .8rem;
        background-color: green;
        border-radius: 50%;
        border: 1px solid #000;
        left: .9rem;
        top: .1rem;
        transition: 300ms;

    }

    &:checked {
        background-color: #f60;
    }

    &:checked:before {
        background-color: #d5d5d5;
        left: .1rem;

    }
}