/* MODULE SCSS => ./scss2/_switches.scss
*//*
 * LICENCE : CloudUnit is available under the Affero Gnu Public License GPL V3 : https://www.gnu.org/licenses/agpl-3.0.html
 *     but CloudUnit is licensed too under a standard commercial license.
 *     Please contact our sales team if you would like to discuss the specifics of our Enterprise license.
 *     If you are not sure whether the GPL is right for you,
 *     you can always test our software under the GPL and inspect the source code before you contact us
 *     about purchasing a commercial license.
 *
 *     LEGAL TERMS : "CloudUnit" is a registered trademark of Treeptik and can't be used to endorse
 *     or promote products derived from this project without prior written permission from Treeptik.
 *     Products or services derived from this software may not be called "CloudUnit"
 *     nor may "Treeptik" or similar confusing terms appear in their names without prior written permission.
 *     For any questions, contact us : contact@treeptik.fr
 */

/* box autour du slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 14px;
  vertical-align: middle;
  border: none;
  &.large {
    margin: 13px 30px;
    width: 50px;
    height: 21px;
    .slider:before {
      height: 15px;
      width: 15px;
      left: 3px;
      bottom: 3px;
    }
    input:checked + .slider:before {
      -webkit-transform: translateX(29px);
      -ms-transform: translateX(29px);
      transform: translateX(29px); 
    }
  }
}

/* Cacher HTML checkbox par defaut*/
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-disabled;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: $color-primary;
}

input:focus + .slider {
  box-shadow: 0 0 1px $color-primary;
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}
