// Variables
// ========================================================================

@toggle-background-color:                   #dcdfe6;
@toggle-active-background-color:            @global-primary-background;
@toggle-success-active-background-color:    @global-success-background;
@toggle-danger-active-background-color:     @global-danger-background;
@toggle-warning-active-background-color:    @global-warning-background;
@toggle-width:                              32px;
@toggle-height:                             16px;
@toggle-button-background-color:            white;
@toggle-button-shadow:                      0 1px 3px 0 rgba(0,0,0,.45);

/* Toggle
 ========================================================================== */

/* The switch - the box around the slider */
.uk-toggle {
  position: relative;
  display: inline-block;
  width: @toggle-width;
  height: @toggle-height;
  .hook-toggle;
}

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

/* The slider */
.uk-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 4px;
  background-color: @toggle-background-color;
  border-radius: @toggle-height;
  -webkit-transition: .3s;
  transition: .3s;
}

.uk-toggle-slider:before {
  position: absolute;
  content: "";
  height: @toggle-height;
  width: @toggle-height;
  left: 0;
  bottom: -4px;
  background-color: @toggle-button-background-color;
  box-shadow: @toggle-button-shadow;
  border-radius: @toggle-height;
  -webkit-transition: .3s;
  transition: .3s;}

.uk-toggle-slider:hover:before {
  height: round(@toggle-height*1.125);
  width: round(@toggle-height*1.125);
  bottom: -5px;
  left: -1px;
}

.uk-toggle-success {
  input:checked + .uk-toggle-slider {
    background-color: @toggle-success-active-background-color;
  }
}

.uk-toggle-danger {
  input:checked + .uk-toggle-slider {
    background-color: @toggle-danger-active-background-color;
  }
}

.uk-toggle-warning {
  input:checked + .uk-toggle-slider {
    background-color: @toggle-warning-active-background-color;
  }
}

input:checked + .uk-toggle-slider {
  background-color: @toggle-active-background-color;
}

input:focus + .uk-toggle-slider {
  box-shadow: 0 0 1px @toggle-button-shadow;
}

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

.hook-toggle() {
  vertical-align: middle;
}