/* Switch

========================================================================== */

.switch, .switch * {

-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;

}

.switch label {

cursor: pointer;

}

.switch label input {

opacity: 0;
width: 0;
height: 0;

&:checked + .lever {
  background-color: $switch-checked-lever-bg;

  &:after {
    background-color: $switch-bg-color;
    left: 24px;
  }
}

}

.switch label .lever {

content: "";
display: inline-block;
position: relative;
width: 40px;
height: 15px;
background-color: $switch-unchecked-lever-bg;
border-radius: $switch-radius;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin: 0 16px;

&:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: $switch-unchecked-bg;
  border-radius: 21px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
  left: -5px;
  top: -3px;
  transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
}

}

// Switch active style input:checked:not(:disabled) ~ .lever:active::after, input:checked:not(:disabled).tabbed:focus ~ .lever::after {

box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);

}

input:not(:disabled) ~ .lever:active:after, input:not(:disabled).tabbed:focus ~ .lever::after {

box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);

}

// Disabled Styles .switch input[disabled] + .lever {

cursor: default;

}

.switch label input[disabled] + .lever:after, .switch label input[disabled]:checked + .lever:after {

background-color: $input-disabled-solid-color;

}