// https://codepen.io/zzseba78/pen/PxwmeV

.uk-switch {
  position: relative;
  display: inline-block;
  height: 19px;
  width: 40px;
}

.uk-switch-grid {
  .uk-first-column {
    padding-top: 2px;
    padding-right: 5px;
  }
}

/* Hide default HTML checkbox */
.uk-switch input {
  display: none;
}

/* Slider */
.uk-switch-slider {
  background-color: rgba(0,0,0,0.22);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 500px;
  bottom: 0;
  cursor: pointer;
  transition-property: background-color;
	transition-duration: .2s;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.07);
}
/* Switch pointer */
.uk-switch-slider:before {
  content: '';
  background-color: #fff;
  position: absolute;
  width: 15px;
  height: 15px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  transition-property: transform, box-shadow;
	transition-duration: .2s;
}
/* Slider active color */
input:checked + .uk-switch-slider {
  background-color: #39f !important;
}
/* Pointer active animation */
input:checked + .uk-switch-slider:before {
  transform: translateX(20px);
}

/* Modifiers */
.uk-switch-slider.uk-switch-on-off {
  background-color: $exile-toast-red;
}
input:checked + .uk-switch-slider.uk-switch-on-off {
  background-color: $exile-toast-green !important;
}

input:disabled + .uk-switch-slider.uk-switch-on-off {
  background-color: scale-color($exile-toast-red, $lightness: -50%);
}

input:checked:disabled + .uk-switch-slider.uk-switch-on-off {
  background-color: scale-color($exile-toast-green, $lightness: -50%) !important;
}


/* Style Modifier */
.uk-switch-slider.uk-switch-big:before {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0,0,0,0.22);
}
.uk-switch-slider.uk-switch-small:before {
  box-shadow: 0 0 6px rgba(0,0,0,0.22);
}
input:checked + .uk-switch-slider.uk-switch-big:before {
  transform: translateX(26px) scale(1.2);
}

/* Inverse Modifier - affects only default */
.uk-light .uk-switch-slider:not(.uk-switch-on-off) {
  background-color: rgba(255,255,255,0.22);
}