// .toggle-slider {
//   background-color: $toggleBGColor;
// }

// .toggle-slider:before {
//   background-color: $toggleBGBeforeColor;
// }

// input:checked + .toggle-slider {
//   background-color: $toggleBGChecked;
// }





/* Rounded sliders */
.round {
  border :$toggleBorderSize solid $toggleBorderColor;
}



/*  small size */

.smallToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
 
}

.smallToggleSlider:before {
  background-color: $toggleBGBeforeColor;
}
input:checked + .smallToggleSlider {
  background-color: $toggleBGChecked;
}

input:focus + .smallToggleSlider {
  box-shadow: 0 0 1px $toggleBorderColor;
}



 /* medium size  */

.mediumToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
}

.mediumToggleSlider:before {
  background-color: $toggleBGBeforeColor;
}
input:checked + .mediumToggleSlider {
  background-color: $toggleBGChecked;
}

input:focus + .mediumToggleSlider {
  box-shadow: 0 0 1px $toggleBorderColor;
}


/* large size */

.largeToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
}

.largeToggleSlider:before {
  background-color: $toggleBGBeforeColor;
}
input:checked + .largeToggleSlider {
  background-color: $toggleBGChecked;
}

input:focus + .largeToggleSlider {
  box-shadow: 0 0 1px $toggleBorderColor;
}


//  type 2 : small

.smallType2ToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
}

// medium

.mediumType2ToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
}

// large

.largeType2ToggleSlider {
  border :$toggleBorderSize solid $toggleBorderColor;
  background-color: $toggleBGColor;
}

.largeType2ToggleSlider:before {
  background-color: $toggleBGBeforeColor;
}

.mediumType2ToggleSlider:before  {
  background-color: $toggleBGBeforeColor;
  
}

.smallType2ToggleSlider:before  {
  background-color: $toggleBGBeforeColor;
}

input:checked + .smallType2ToggleSlider {
  background-color: $toggleBGChecked;
}

input:checked + .mediumType2ToggleSlider {
  background-color: $toggleBGChecked;
}

input:checked + .largeType2ToggleSlider {
  background-color: $toggleBGChecked;
}

.smallToggleSlider:focus{
  outline: 1px solid $toggleBGBeforeColor;
}

.mediumToggleSlider:focus {
  outline: 1px solid $toggleBGBeforeColor;

}

.largeToggleSlider:focus {
  outline: 1px solid $toggleBGBeforeColor;

}
//  type 2
.largeType2ToggleSlider:focus {
  outline: 1px solid $toggleBGBeforeColor;

}

.mediumType2ToggleSlider:focus {
  outline: 1px solid $toggleBGBeforeColor;

}

.smallType2ToggleSlider:focus {
  outline: 1px solid $toggleBGBeforeColor;

}