
/**
 * Toggle
 * --------------------------------------------------
 */

/* the overall container of the toggle */
.toggle {
  // set the color defaults
  @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);

  position: relative;
  display: inline-block;
  margin: -$toggle-hit-area-expansion;
  padding: $toggle-hit-area-expansion;

  &.dragging {
    .handle {
      background-color: $toggle-handle-dragging-bg-color !important;
    }
  }

  &.toggle-light  {
    @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
  }
  &.toggle-stable  {
    @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
  }
  &.toggle-positive  {
    @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
  }
  &.toggle-calm  {
    @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
  }
  &.toggle-assertive  {
    @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
  }
  &.toggle-balanced  {
    @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
  }
  &.toggle-energized  {
    @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
  }
  &.toggle-royal  {
    @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
  }
  &.toggle-dark  {
    @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
  }
}

/* hide the actual input checkbox */
.toggle input {
  display: none;
}

/* the track appearance when the toggle is "off" */
.toggle .track {
  @include transition-timing-function(ease-in-out);
  @include transition-duration($toggle-transition-duration);
  @include transition-property((background-color, border));

  display: inline-block;
  box-sizing: border-box;
  width: $toggle-width;
  height: $toggle-height;
  border: solid $toggle-border-width $toggle-off-border-color;
  border-radius: $toggle-border-radius;
  background-color: $toggle-off-bg-color;
  content: ' ';
  cursor: pointer;
}

/* the handle (circle) thats inside the toggle's track area */
/* also the handle's appearance when it is "off" */
.toggle .handle {
  @include transition($toggle-transition-duration ease-in-out);
  position: absolute;
  top: $toggle-border-width + $toggle-hit-area-expansion;
  left: $toggle-border-width + $toggle-hit-area-expansion;
  display: block;
  width: $toggle-handle-width;
  height: $toggle-handle-height;
  border-radius: $toggle-handle-radius;
  background-color: $toggle-handle-off-bg-color;

  /* used to create a larger (but hidden) hit area to slide the handle */
  &:before {
    position: absolute;
    top: -4px;
    left: ( ($toggle-handle-width / 2) * -1) - 8;
    padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
    content: " ";
  }
}

  /* the handle when the toggle is "on" */
.toggle input:checked + .track .handle {
  @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
  background-color: $toggle-handle-on-bg-color;
}

/* make sure list item content have enough padding on right to fit the toggle */
.item-toggle {
  padding-right: ($item-padding * 3) + $toggle-width;

  &.active {
    box-shadow: none;
  }
}

/* position the toggle to the right within a list item */
.item-toggle .toggle {
  position: absolute;
  top: $item-padding / 2;
  right: $item-padding;
  z-index: $z-index-item-toggle;
}

.toggle input:disabled + .track {
  opacity: .6;
}
