@import "./config";

/**
 * Toggle:
 * `.Toggle`: Toggle input, usually used for setting enable/disable settings
 *
 *     @example
 *     .Box
 *       .Toggle.is-off
 *         label.Toggle-label
 *           .Toggle-control
 *             input.Toggle-input(type="checkbox")
 *             i.Toggle-background
 *             i.Toggle-switch
 *           span.Toggle-labelText Fan
 *           span.Toggle-status Off
 *     .Box
 *       .Toggle.is-on
 *         label.Toggle-label
 *           .Toggle-control
 *             input.Toggle-input(type="checkbox" checked)
 *             i.Toggle-background
 *             i.Toggle-switch
 *           span.Toggle-labelText Oven
 *           span.Toggle-status On
 *     .Box
 *       .Toggle.is-off.is-disabled
 *         label.Toggle-label
 *           .Toggle-control
 *             input.Toggle-input(type="checkbox" disabled)
 *             i.Toggle-background
 *             i.Toggle-switch
 *           span.Toggle-labelText Fan (disabled)
 *           span.Toggle-status Off
 *     .Box
 *       .Toggle.is-on.is-disabled
 *         label.Toggle-label
 *           .Toggle-control
 *             input.Toggle-input(type="checkbox" disabled checked)
 *             i.Toggle-background
 *             i.Toggle-switch
 *           span.Toggle-labelText Oven (disabled)
 *           span.Toggle-status On
 */

.Toggle {
  position: relative;
  min-height: @toggle-height;
}

.Toggle--inline {
  display: inline-block;
}

// Toggle is used as a header to a panel/section
.Toggle--heading {
  .Toggle-labelText {
    font-size: @toggle-heading-label-font-size;
    font-family: @toggle-label-font-family;
  }
}

.Toggle-label {
  font-weight: normal;
  margin-left: 0;
  margin-bottom: 0;
}

.Toggle-labelText {
  font-family: @toggle-label-font-family;
  font-size: @toggle-label-font-size;
  color: @blue-darker;
  line-height: @toggle-height;
}

// TODO: Deprecate
.Toggle-heading-image {
  height: @toggle-heading-image-height;
  width: auto;
}

.Toggle-control {
  display: inline;
  float:right;
  cursor: pointer;
  height: @toggle-height;
  width: @toggle-width;
  margin-right: 0;
}

.Toggle-input {
  position: relative;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  height: @toggle-height;
  width: @toggle-width;
}

.Toggle-background {
  height: @toggle-height;
  width: @toggle-width;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-color: @toggle-off-background-color;;
  border-radius: (@toggle-height/2);
  transition: background-color @toggle-transition-duration linear;
}

.Toggle-switch {
  height: @toggle-height - (@toggle-switch-gap * 2);
  width: @toggle-height - (@toggle-switch-gap * 2);
  position: absolute;
  right: (@toggle-width - (@toggle-height - @toggle-switch-gap));
  top: @toggle-switch-gap;
  border-radius: 50%;
  background-color: @white;
  transition: right @toggle-transition-duration linear;
}

.Toggle-input:checked ~ .Toggle-background {
  background-color: @toggle-on-background-color;
}

.Toggle-input:disabled ~ .Toggle-background {
  background-color: @toggle-off-disabled-background-color;
}

.Toggle-input:checked:disabled ~ .Toggle-background {
  background-color: @toggle-on-disabled-background-color;
}

// Disabled inputs doesn't fire events. By hidding the disabled input the
// container is able to capture mouse events.
.Toggle-input[type="checkbox"][disabled] {
  display: none;
}

.Toggle-input:checked ~ .Toggle-switch {
  right: @toggle-switch-gap;
}

.Toggle-status {
  float: right;
  margin-right: 10px;
  font-size: @toggle-status-font-size;
  height: @toggle-height;
  line-height: @toggle-height;
}

.Toggle.is-on {
  .Toggle-status {
    color: @green;
  }
}

.Toggle.is-off {
  .Toggle-status {
    color: @gray-light;
  }
}

.Toggle.is-disabled {
  .Toggle-control,
  .Toggle-input {
    cursor: not-allowed;
  }
}