.switch {
    position: relative;
    display: inline-block;
    min-width: 60px;
    height: 34px;
    vertical-align: middle;
    text-align: center;
    input {
        display:none;
    }
    &-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        &-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }


    input:checked + &-slider {
        background-color: $primary-color;
    }

    input:focus + &-slider {
        box-shadow: 0 0 1px $primary-color;
    }

    input:checked + &-slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    /* Rounded sliders */
    &-slider.round {
        border-radius: 34px;
        }
        
    &-slider.round:before {
        border-radius: 50%;
        }
}