/* Switch

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

.switch, .switch * {

-webkit-tap-highlight-color: transparent;
user-select: none;

}

.switch label {

cursor: pointer;

}

.switch label input {

opacity: 0;
width: 0;
height: 0;
&:checked + .lever {
  background-color: $switch-checked-lever-bg;
  &:before, &:after {
    left: 18px;
  }
  &:after {
    background-color: $switch-bg-color;
  }
}

}

.switch label .lever {

content: "";
display: inline-block;
position: relative;
width: 36px;
height: 14px;
background-color: $switch-unchecked-lever-bg;
border-radius: $switch-radius;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin: 0 16px;
&:before, &:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 0;
  top: -3px;
  transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
}
&:before {
  background-color: transparentize($switch-bg-color, .85);
}
&:after {
  background-color: $switch-unchecked-bg;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

}

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

transform: scale(2.4);
background-color: transparentize($switch-bg-color, .85);

}

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

transform: scale(2.4);
background-color: rgba(0,0,0,.08);

}

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

cursor: default;
background-color: rgba(0,0,0,.12);

}

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

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

}