//switch
$switch-width: 36px;
$switch-height: 20px;
$switch-inner-size: 16px;
$switch-background-color: $color-gray-chateau;
$switch-disabled-background: $color-mystic;
$switch-active-background-color: #33BC62;
$switch-inner-background-color: $color-white;
$switch-disabled-inner-color: $color-loblolly;
$switch-green-color: #33BC62;

.onoffswitch {
  position: relative;
  width: $switch-width;
  user-select: none;

  input[type="checkbox"],
  input[type="radio"]{
    display: none;
  }
}

label.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: $switch-height;
  width:100%;
  padding: 0;
  line-height: $switch-height;
  border-radius: $switch-height;
  background-color: $switch-background-color;
  transition: background-color 0.2s ease-in;
}

input[type="checkbox"].checkbox-red + label.onoffswitch-label,
input[type="radio"].checkbox-red + label.onoffswitch-label{
  background-color: $color-mandy;
}

input[type="checkbox"] + label.onoffswitch-label:before,
input[type="radio"] + label.onoffswitch-label:before {
  content: "\e910";
  font-family: 'shoplo-kit';
  color: $switch-inner-background-color;
  font-size: rem-calc(16);
  line-height: 15px;
  display: block;
  width: $switch-inner-size;
  height: $switch-inner-size;
  margin: 0px;
  background: $switch-inner-background-color;
  position: absolute;
  top: ($switch-height - $switch-inner-size) /2 ;
  bottom: 0;
  right: $switch-width - $switch-inner-size - ($switch-height - $switch-inner-size) /2;
  border: 1px solid $switch-inner-background-color;
  border-radius: $switch-inner-size;
  transition: all 0.2s ease-in 0s;
}

input[type="checkbox"]:checked + label.onoffswitch-label:before ,
input[type="radio"]:checked + label.onoffswitch-label:before {
  content: "\e910";
}

input[type="checkbox"]:checked + label.onoffswitch-label ,
input[type="radio"]:checked + label.onoffswitch-label {
  background-color: $switch-active-background-color;
}

input[type="checkbox"].checkbox-green:checked + label.onoffswitch-label ,
input[type="radio"].checkbox-green:checked + label.onoffswitch-label {
  background-color: $switch-green-color;
}

input[type="checkbox"].checkbox-green:disabled:checked + label.onoffswitch-label:before,
input[type="radio"].checkbox-green:disabled:checked + label.onoffswitch-label:before{
  color: $switch-green-color;
}

input[type="checkbox"]:checked + label.onoffswitch-label:before ,
input[type="radio"]:checked + label.onoffswitch-label:before {
  right: ($switch-height - $switch-inner-size) /2;
  color: $switch-active-background-color;
  content: "\e910";
}

input[type="checkbox"]:disabled + label.onoffswitch-label,
input[type="radio"]:disabled + label.onoffswitch-label{
  background: $switch-disabled-background;
  &:before {
    color: $switch-inner-background-color;
    border-color: $switch-inner-background-color;
    background: $switch-inner-background-color;
  }
}

input[type="checkbox"]:disabled:checked + label.onoffswitch-label,
input[type="radio"]:disabled:checked + label.onoffswitch-label{
  &:before {
    border-color: $switch-inner-background-color;
    background: $switch-inner-background-color;
    color: $switch-disabled-inner-color
  }
}