/**
* Toggle button
*
* @usage
*  ### Active and Inactive text should be provided as data attributes:
*  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>

*  ### Checked should have `is-checked` class
*  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>

*  ### Disabled should have `is-disabled` class
*  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>
*/

$toggle-width: 4.5 * $grid-size;
$toggle-translate-width: 2 * $grid-size;
$toggle-height: 2.5 * $grid-size;

.gl-toggle-wrapper {
  @apply gl-leading-normal;
  @apply gl-font-normal;
  @apply gl-inline-flex;
}

.gl-description-label {
  @apply gl-text-subtle;
}

.gl-help-label {
  @apply gl-mt-3;
  @apply gl-font-normal;
  @apply gl-text-subtle;
}

.gl-toggle-label-inline {
  @apply gl-flex-row;
  @apply gl-items-center;

  .gl-toggle-label {
    @apply gl-whitespace-nowrap;
    @apply gl-mb-0;
    @apply gl-mr-3;
  }

  .gl-help-label {
    @apply gl-mt-0;
    @apply gl-ml-3;
  }
}

.gl-toggle-label {
  @apply gl-font-bold;
  @apply gl-text-strong;
}

.gl-toggle {
  @apply gl-inline-flex;
  @apply gl-items-center;
  @apply gl-justify-center;
  @apply gl-border-0;
  @apply gl-cursor-pointer;
  color: var(--gl-toggle-switch-icon-color-unchecked-default);
  background-color: var(--gl-toggle-switch-track-color-unchecked-default);
  position: relative;
  width: $toggle-width;
  height: $toggle-height;
  user-select: none;
  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
  @apply gl-rounded-pill;
  @apply gl-leading-normal;
  transition:
    color $gl-transition-duration-medium $gl-easing-out-cubic,
    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
  @include gl-prefers-reduced-motion-transition;

  @media (forced-colors: active) {
    border: 1px solid;
  }

  &::selection,
  &::before::selection,
  &::after::selection {
    @apply gl-bg-transparent;
  }

  &:hover {
    color: var(--gl-toggle-switch-icon-color-unchecked-hover);
    background-color: var(--gl-toggle-switch-track-color-unchecked-hover);
    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);

    .toggle-icon::before {
      transform: scale(0.875);
    }
  }

  &:focus {
    color: var(--gl-toggle-switch-icon-color-unchecked-focus);
    background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
    @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
  }

  &:active {
    color: var(--gl-toggle-switch-icon-color-unchecked-active);
    background-color: var(--gl-toggle-switch-track-color-unchecked-active);
    @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
  }

  .toggle-loading {
    @apply gl-h-5;
  }

  .toggle-icon {
    @apply gl-absolute;
    @apply gl-w-5;
    @apply gl-h-5;
    @apply gl-left-1;
    @apply gl-top-1;
    transition: transform $gl-transition-duration-medium $gl-easing-out-cubic;
    @include gl-prefers-reduced-motion-transition;

    &::before {
      content: "";
      @apply gl-absolute;
      @apply gl-inset-0;
      @apply gl-rounded-full;
      background-color: var(--gl-toggle-switch-background-color-unchecked-default);
      transform: scale(0.75);
      transition:
        transform $gl-transition-duration-medium $gl-easing-out-cubic,
        background-color $gl-transition-duration-medium $gl-easing-out-cubic;
      @include gl-prefers-reduced-motion-transition;
    }

    > svg {
      @apply gl-absolute;
      @apply gl-w-4;
      @apply gl-h-4;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // Check/close icons are only rendered in Windows high contrast
      // (forced-colors) mode so the toggle state remains distinguishable
      // when background colors are overridden by the user agent.
      display: none;

      @media (forced-colors: active) {
        display: block;
      }
    }
  }

  &.is-checked {
    color: var(--gl-toggle-switch-icon-color-checked-default);
    background-color: var(--gl-toggle-switch-track-color-checked-default);
    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);

    &:hover {
      color: var(--gl-toggle-switch-icon-color-checked-hover);
      background-color: var(--gl-toggle-switch-track-color-checked-hover);
      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
    }

    &:focus {
      color: var(--gl-toggle-switch-icon-color-checked-focus);
      background-color: var(--gl-toggle-switch-track-color-checked-focus);
      @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
    }

    &:active {
      color: var(--gl-toggle-switch-icon-color-checked-active);
      background-color: var(--gl-toggle-switch-track-color-checked-active);
      @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
    }

    .toggle-icon {
      transform: translateX($toggle-translate-width);
    }

    .toggle-icon::before {
      background-color: var(--gl-toggle-switch-background-color-checked-default);
      transform: scale(1);
    }
  }

  &.is-disabled,
  &.is-checked.is-disabled {
    @apply gl-cursor-not-allowed;
    color: var(--gl-action-disabled-background-color);
    background-color: var(--gl-action-disabled-background-color);
    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);

    .toggle-icon {
      color: var(--gl-toggle-switch-icon-color-disabled);
    }

    .toggle-icon::before {
      background-color: var(--gl-toggle-switch-background-color-disabled);
    }

    &:hover .toggle-icon::before {
      transform: scale(0.75);
    }

    &.is-checked .toggle-icon::before,
    &.is-checked:hover .toggle-icon::before {
      transform: scale(1);
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
    }
  }
}