/* the overall container of the toggle */
.toggle {
  display: inline-block;
}

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

.toggle .track {
  /* the background of the toggle's track area */
  /* also the track appearance when the toggle is "off" */
  position: relative;
  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;
  cursor: pointer;

  transition: $toggle-transition-duration + .2s ease;
}

.toggle .handle {
  /* the handle (circle) thats inside the toggle's track area */
  /* also the appearance when the handle is "off" */
  position: absolute;
  display: block;
  width: auto; /* override defaults */
  height: auto; /* override defaults */
  box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
  border-radius: $toggle-handle-radius;
  background-color: $toggle-handle-off-bg-color;
  left: 0;
  top: 0;
  bottom: 0;
  right: $toggle-border-radius;
  
  transition: $toggle-transition-duration ease;
  transition-property: left, right;
  transition-delay: 0s, .05s;
}


.toggle :checked + .track {
  /* When the toggle is "on" */

  /* the track when the toggle is "on" */
  border-color: $toggle-on-border-color;
  background-color: #ccc;
  box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
  transition: $toggle-transition-duration ease;

  /* the handle when the toggle is "on" */
  .handle {
    background-color: $toggle-handle-on-bg-color;
    right: 0;
    left: $toggle-border-radius;
    -webkit-transform: none;
    transition-delay: .05s, 0s;
  }
}