// Busy Indicator
//================================================== //

$busy-indicator-size: 64px;
$busy-indicator-check-color: $inverse-color;
$delay: 0.14s; // Define common delay value

.ai-loading-indicator {
  display: flex;
  position: relative;
  width: 56px;

  &[hidden] {
    display: none;
  }

  .bar {
    margin-right: 2px;
    margin-left: 2px;
    background-color: $loading-indicator-ai-bar-base-bg-color;
    width: 16px;
    height: 8px;
    border-radius: 8px;
    transition: 0.2s;
    animation: loading 1.2s ease-in-out 0.2s infinite;

    &:nth-child(1) {
      background-color: $loading-indicator-ai-bar-one-bg-color;
      animation-delay: 0s;
    }

    &:nth-child(2) {
      background-color: $loading-indicator-ai-bar-two-bg-color;
      animation-delay: $delay;
    }

    &:nth-child(3) {
      background-color: $loading-indicator-ai-bar-three-bg-color;
      animation-delay: 3 * $delay; // Adjusted delay for the third bar
    }
  }
}

@keyframes loading {
  0% {
    height: 8px;
  }

  50% {
    width: 56px;
  }

  100% {
    height: 8px;
  }
}

@keyframes indeterminate-spinner-anim {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes indeterminate-spinner-progress-anim {
  0%,
  15% {
    stroke-dashoffset: 272;
    transform: rotate(0);
  }

  60% {
    stroke-dashoffset: 80;
    transform: rotate(45deg);
  }

  65% {
    stroke-dashoffset: 80;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 272;
    transform: rotate(360deg);
  }
}

.busy-indicator-container {
  @include opacity(1);
  @include transition(opacity 500ms);

  display: inline-block;
  text-align: center;
  vertical-align: middle;
  z-index: 1010;

  &.is-hidden {
    @include opacity(0);
  }

  &.blocked-ui {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(50% - 58px); // 115/2, 115 is the height of .busy-indicator-container
  }

  span {
    @include font-size(16);

    color: $busy-indicator-color;
    display: block;
  }
}

.busy-indicator {
  @include opacity(1);

  display: inline-block;
  height: $busy-indicator-size;
  margin: 2px;
  position: relative;
  vertical-align: middle;
  width: $busy-indicator-size;

  &.is-hidden {
    @include opacity(0);
  }

  .bar {
    background-color: $busy-indicator-color;
    display: inline-block;
    height: 50px;
    margin-right: 5px;
    width: 5px;

    &:last-child {
      margin-right: 0;
    }
  }

  // Animation doesn't happen when the container is hidden
  &:not(.is-hidden) > .bar {
    @include css3(animation, stretchdelay 1s infinite ease-in-out);
    &.one { @include css3(animation-delay, -0.5s); }
    &.two { @include css3(animation-delay, -0.4s); }
    &.three { @include css3(animation-delay, -0.3s); }
    &.four { @include css3(animation-delay, -0.2s); }
    &.five { @include css3(animation-delay, -0.1s); }
  }

  svg.circular-indicator {
    fill: transparent;
    width: 50px;
    height: 50px;

    &.indeterminate {
      animation: 2.4s linear infinite indeterminate-spinner-anim;
    }

    .progress {
      animation: 1.52s linear infinite both indeterminate-spinner-progress-anim;
      stroke-dasharray: 283;
      stroke: rgba($busy-indicator-color, 1);
    }

    .circle {
      stroke: rgba($busy-indicator-color, 0.5);
    }

    circle {
      transform-origin: 50% 50%;
    }
  }
}

// Overlay Override for Busy Indicator
.busy.overlay {
  @include opacity(0.75);
  @include transition(opacity 500ms);

  background-color: $body-color-primary-background;
  position: absolute;
  visibility: visible;

  &.transparent {
    background-color: transparent;
  }

  &.is-hidden {
    @include opacity(0);
  }
}

// Animation Keyframes
@include keyframes(stretchdelay) {
  0%,
  70%,
  100% {
    @include css3(transform, scaleY(0.5));
  }
  35% { @include css3(transform, scaleY(1)); }
}

// Display changes based on host element type
input + .busy-indicator-container,
.dropdown-wrapper > .busy-indicator-container {
  position: absolute;

  + .busy.overlay {
    @include opacity(0.5);

    &.is-hidden {
      @include opacity(0);
    }
  }

  .busy-indicator {
    background-color: transparent;
    height: 22px;
    margin: 8px 1px 1px;
    position: absolute;
    right: 0;
    width: 40px;

    .bar {
      height: 22px;
      margin-right: 3px;
      width: 3px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.form-layout-compact input + .busy-indicator-container,
.form-layout-compact .dropdown-wrapper > .busy-indicator-container {
  .busy-indicator {
    height: 18px;
    margin-top: 5px;

    .bar {
      height: 18px;
    }
  }
}

.inline {
  + .busy-indicator-container,
  .dropdown-wrapper > .busy-indicator-container {
    .busy-indicator {
      background-color: transparent;
      height: 22px;
      margin: 5px 1px 1px;
      position: absolute;
      right: 0;
      width: 40px;

      .bar {
        height: 24px;
        margin-right: 3px;
        width: 3px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

.ie9 {
  .busy-indicator {
    .bar {
      -ms-transform: scaleY(0.6);
      transform: scaleY(0.6);
      -ms-transform-origin: 50% 50%;
      transform-origin: 50% 50%;

      &.half {
        -ms-transform: scaleY(0.8);
        transform: scaleY(0.8);
      }

      &.full {
        -ms-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
  }
}

// bump everything up 1px because Firefox
.is-firefox {
  input + .busy-indicator-container,
  .dropdown-wrapper > .busy-indicator-container {
    position: absolute;

    .busy-indicator {
      margin: 7px 5px 1px;
    }
  }
}

.busy-xs {
  min-height: 20px;
  min-width: 20px;

  .busy-indicator-container.blocked-ui {
    top: calc(50% - 8px);
  }

  .busy-indicator {
    height: inherit;
    margin: 2px;
    width: inherit;

    .bar {
      height: 12px;
      margin-right: 2px;
      width: 2px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.busy-sm {
  min-height: 28px;
  min-width: 40px;

  .busy-indicator-container.blocked-ui {
    top: calc(50% - 18px);
  }

  .busy-indicator {
    height: inherit;
    margin: 4px;
    width: inherit;

    .bar {
      height: 22px;
      margin-right: 3px;
      width: 3px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// Animate in the body if adding the class busy-loading-locale
// It will cause the page and icons to flip visibilibly when using RTL so this is nice to do.
body {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

.busy-loading-locale {
  opacity: 0;
}

// RTL Styles
html[dir='rtl'] {
  .busy-indicator {
    .bar {
      margin-left: 5px;
      margin-right: 0;

      &:last-child {
        margin-left: 0;
      }
    }
  }

  // Display changes based on host element type
  input + .busy-indicator-container,
  .dropdown-wrapper > .busy-indicator-container {
    .busy-indicator {
      left: 0;
      right: auto;

      .bar {
        margin-left: 3px;
        margin-right: 0;

        &:last-child {
          margin-left: 0;
        }
      }
    }
  }

  .busy-xs {
    .busy-indicator {
      .bar {
        margin-left: 2px;
        margin-right: 0;

        &:last-child {
          margin-left: 0;
        }
      }
    }
  }

  .busy-sm {
    .busy-indicator {
      .bar {
        margin-left: 2px;
        margin-right: 0;

        &:last-child {
          margin-left: 0;
        }
      }
    }
  }
}