/* scss/Atoms/_Toggle.scss */


label.switch {
  position: relative;
  display: inline-block;
  min-width: 50px;
  height: 15px;
  margin: 1em;

	 input[type="checkbox" i], input[type="checkbox"] {
	  @include appearance(none);
	  opacity: 0;
	  width: 0;
	  height: 0;
	}

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

	span.slider:before {
	  position: absolute;
	  content: "";
	  height: 1.5em;
	  width: 1.5em;
	  left: 0;
	  bottom: -.3em;
	  box-shadow: 0 0 1px 1px  rgba(0,0,0,0.1);
	  background-color: #fff;
	  -webkit-transition: .4s;
	  transition: .4s;
	}

	input[type="checkbox"]:checked + .slider {
	  background-color: $link-active-color;
	}

	input[type="checkbox"]:focus + .slider {

	}

	input[type="checkbox"]:checked + .slider:before {
	  -webkit-transform: translateX(110%);
	  -ms-transform: translateX(110%);
	  transform: translateX(110%);
	}

	/* Rounded sliders */
	.slider.round {
	  @include borderRadius(34px);
	}

	.slider.round:before {
	  @include borderRadius(34px);
	}
}

	input[type="checkbox"]:disabled + .slider{
			opacity: .5;
			cursor: initial;
			pointer-events: none;
	}