$toggle-height: 26px !default;
$toggle-width: 50px !default;
$toggle-switch-size: 26px !default;
$toggle-wrapper-height: 36px !default;

$toggle-animation: cubic-bezier(0.34,1.61,0.7,1) !default;
$toggle-animation-speed: 250ms !default;

$toggle-border-color: $light-gray-2 !default;
$toggle-active-color: $accent !default;

//   BASE
// -------------------------------------

.toggle {
  position: relative;
  height: $toggle-height;
  font-size: $label-font-size;
  margin-bottom: 0;
  cursor: pointer;
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  min-height: $toggle-wrapper-height;
  width: 100%;
  user-select: none;


  &.toggle--distribution-leading {
    justify-content: flex-start;
  }

  &.toggle--distribution-trailing {
    justify-content: flex-end;
  }

  &.toggle--distribution-center {
    justify-content: center;
  }

  &.toggle--distribution-equalSpacing {
    justify-content: space-between;
  }

  > input {
    position: absolute;
    opacity: 0;
    z-index: -1; /* Put the input behind the label so it doesn't overlay text */
    visibility: hidden;
  }

  .toggle-body {
    width: $toggle-width;
    height: $toggle-height;
    background: white;
    border: 1px solid $toggle-border-color;
    display: inline-block;
    position: relative;
    border-radius: 50px;
    margin-left: $spacing-xs;
  }

  .toggle-switch {
    width: $toggle-height;
    height: $toggle-height;
    display: inline-block;
    background-color: white;
    position: absolute;
    right: -1px;
    top: -1px;
    border-radius: 50%;
    border: 1px solid $toggle-border-color;
    box-shadow: 0 2px 2px rgba($dark-gray-1,.13);
    transition: right $toggle-animation $toggle-animation-speed, transform $toggle-animation $toggle-animation-speed;
    z-index: 1;
  }

  .toggle-track {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 50px;
  }

  .toggle-bg {
    position: absolute;
    left: -10px; // 10 compensates for animation bounce
    top: 0;
    bottom: 0;
    width: $toggle-width - ($toggle-switch-size / 2) + 10; // 10 compensates for animation bounce
    transition: left $toggle-animation $toggle-animation-speed, right $toggle-animation $toggle-animation-speed;
    background: $toggle-active-color;
    // background: $blue url('../img/toggle-check.png') center center no-repeat;
  }

  .toggle-bg_negative {
    left: auto;
    right: -($toggle-width - ($toggle-switch-size / 2));
    background: white;
    // background: white url('../img/toggle-x.png') center center no-repeat;
  }

  &:hover {
    .toggle-switch {
      border-color: darken($toggle-border-color, 13%);
      transform: scale(1.06);
    }
  }

  &:active {
    .toggle-switch {
      transform: scale(.95);
    }
  }

  > :not(:checked) ~ .toggle-body {
    > .toggle-switch {
      right: $toggle-width - $toggle-switch-size;
    }

    .toggle-bg {
      right: -($toggle-width - ($toggle-switch-size / 2));

      &.toggle-bg_negative {
        left: auto;
        right: -10px;
      }
    }
  }

  &.disabled {
    color: $light-gray-2;

    .toggle-bg {
      background: $light-gray-1;
    }

    .toggle-bg_negative {
      background: $light-gray-2;
    }
  }

  &.skeleton {
    .toggle-body {
      background: none;
      @include skeleton;
      overflow: hidden;
    }

    .toggle-switch, .toggle-bg, .toggle-bg_negative, .toggle-track {
      display: none;
      opacity: 0;
    }
  }
}