@import variables
/* todo: make the sliders smaller */
/* The switch - the box around the slider */
.switch 
    position: relative
    display: inline-block
    width: 60px
    height: 34px
/* Hide default HTML checkbox */
.switch input 
    opacity: 0
    width: 0
    height: 0

/* The slider */
.slider 
    position: absolute
    cursor: pointer
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: $neutral_gray_light
    -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
input:focus + .slider 
    box-shadow: 0 0 1px $primary
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%
/* Range slider */
.range-slider
    -webkit-appearance: none
    border-radius: 5px
    width: 100%
    height: 25px
    background: $neutral_gray_light
    outline: none
    opacity: 0.7
    -webkit-transition: .2s
    transition: opacity .2s
.range-slider:hover
    opacity: 1
.range-slider::-webkit-slider-thumb
    -webkit-appearance: none
    appearance: none
    width: 25px
    height: 25px
    background: $neutral_gray_dark
    cursor: pointer
.range-slider::-moz-range-thumb 
    width: 25px
    height: 25px
    background: $neutral_gray_dark
    cursor: pointer
.range-slider-rounded
    -webkit-appearance: none
    border-radius: 5px
    width: 100%
    height: 15px
    background: $neutral_gray_light
    outline: none
    opacity: 0.7
    -webkit-transition: .2s
    transition: opacity .2s
.range-slider-rounded:hover
    opacity: 1
.range-slider-rounded::-webkit-slider-thumb
    -webkit-appearance: none
    appearance: none
    border-radius: 50%
    width: 25px
    height: 25px
    background: $neutral_gray_dark
    cursor: pointer
.range-slider-rounded::-moz-range-thumb 
    width: 25px
    height: 25px
    background: $neutral_gray_light
    cursor: pointer