/* The switch - the box around the slider */

$switchbox_bubble_color: #2196F3 !default
$switchbox_background_color: #ccc !default
$switchbox_background_active: #2196F3 !default
$switchbox_background_active_before: #f2f2f2 !default
$switchbox-hoverbackground: rgba(154, 158, 167, 1) !default
$background-base-color: #009fd7 !default

.switch
  position: relative
  display: inline-block
  height: 19px

input.switchbox
  opacity: 0

.switchbox-thumb
  position: absolute
  cursor: pointer
  width: 30px
  top: 4px
  left: 0
  right: 0
  bottom: 0
  height: 9px
  background-color: $switchbox_background_color
  -webkit-transition: .4s
  transition: .4s
  border-radius: 17px
  &:before
    position: absolute
    border-radius: 50%
    content: ""
    height: 13px
    width: 13px
    left: 4px
    bottom: -2px
    background-color: $switchbox_bubble_color
    -webkit-transition: .4s
    transition: .4s

.labeltext
  display: inline-block
  cursor: pointer
  margin-left: 45px

input.switchbox
  &:checked + .switchbox-thumb
    background-color: $switchbox_background_active
  &:focus + .switchbox-thumb
    box-shadow: 0 0 1px $switchbox_background_active
  &:checked + .switchbox-thumb:before
    -webkit-transform: translateX(10px)
    -ms-transform: translateX(10px)
    transform: translateX(10px)
    background-color: $switchbox_background_active_before
    border: 1px solid $switchbox-hoverbackground