// Loading Indicator
//================================================== //

// Container
.loading-indicator-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &.is-stopped {
    display: none;
  }

  &.circular.destructive {
    svg.circular-indicator {
      .circle {
        stroke: $loading-indicator-destructive-circle-color;
      }

      .progress {
        stroke: $loading-indicator-destructive-progress-color;
      }
    }
  }

  &.generative-ai {
    display: flex;
  }

  &.linear {
    width: 100%;
    height: 48px;
  }
}

// Circular Indicator
svg.circular-indicator {
  overflow: visible;
  fill: transparent;
  transform-origin: 50% 50%;
  transform: rotateZ(-90deg);
  width: 50px;
  height: 50px;

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

  .circle {
    stroke: $loading-indicator-circle-color;
    fill: transparent;
  }

  .progress {
    stroke: $loading-indicator-progress-color;
    fill: transparent;
    stroke-dasharray: 283;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.275s ease-in, transform 0.275s ease-in;
  }

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

    .progress {
      animation: 1.52s linear infinite both indeterminate-spinner-progress-anim;
    }
  }

  &.determinate {
    .progress {
      stroke-dashoffset: 283;
    }
  }
}

// Linear Indicator
svg.linear-indicator {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;

  .circle {
    fill: $loading-indicator-circle-color;
  }

  .progress {
    fill: $loading-indicator-progress-color;
    transform-origin: left;
  }

  &.indeterminate {
    .progress {
      animation: 2.8s linear infinite both indeterminate-linear-progress-anim;
    }
  }
}

// GenAI Loading Indicator
.loading-indicator-container.generative-ai {
  .ai-loading-indicator {
    display: flex;
    position: relative;
    width: 56px;

    .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-ai-bars 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: 0.14s;
      }

      &:nth-child(3) {
        background-color: $loading-indicator-ai-bar-three-bg-color;
        animation-delay: 0.42s;
      }
    }
  }
}

// Percentage text
.loading-percentage {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .loading-percentage-text {
    font-size: 16px;
    font-weight: 600;
    color: $loading-indicator-text-color;
  }

  &.linear {
    top: 0;
    left: auto;
    transform: translate(-50%, -50%);
    justify-content: center;
  }
}

// Keyframes - Circular indeterminate
@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);
  }
}

// Keyframes - Linear indeterminate
@keyframes indeterminate-linear-progress-anim {
  0% {
    transform: translateX(0%) scaleX(0.0001);
  }

  3.125%,
  53.125% {
    transform: translateX(0%) scaleX(0.2);
  }

  6.25% {
    transform: translateX(20%) scaleX(0.3);
  }

  12.5%,
  62.5% {
    transform: translateX(60%) scaleX(0.45);
  }

  25%,
  75% {
    transform: translateX(100%) scaleX(1);
  }

  25.0001%,
  50%,
  75.0001%,
  100% {
    transform: translateX(0%) scaleX(0.0001);
  }
}

// Keyframes - GenAI bars
@keyframes loading-ai-bars {
  0% {
    height: 8px;
  }

  50% {
    width: 56px;
  }

  100% {
    height: 8px;
  }
}

// Line Loading Indicator
.loading-indicator-container.line {
  flex-direction: column;
  align-items: center;

  .line-loading-indicator {
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;

    .line-bars {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 5px;

      .bar {
        width: 5px;
        height: 50px;
        background-color: $busy-indicator-color;
        border-radius: 0;
        animation: loading-line-bars 1s infinite ease-in-out;

        &:nth-child(1) {
          animation-delay: -0.5s;
        }

        &:nth-child(2) {
          animation-delay: -0.4s;
        }

        &:nth-child(3) {
          animation-delay: -0.3s;
        }

        &:nth-child(4) {
          animation-delay: -0.2s;
        }

        &:nth-child(5) {
          animation-delay: -0.1s;
        }
      }
    }
  }

  .loading-indicator-text {
    display: block;
    font-size: 16px;
    color: $busy-indicator-color;
  }
}

// Keyframes - Line bars
@keyframes loading-line-bars {
  0%,
  70%,
  100% {
    transform: scaleY(0.5);
  }

  35% {
    transform: scaleY(1);
  }
}

// Field spacing for spinbox used with loading indicator
.loading-indicator-field {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

// RTL Styles
html[dir='rtl'] {
  .loading-indicator-container.generative-ai {
    .ai-loading-indicator {
      .bar {
        margin-left: 2px;
        margin-right: 2px;
      }
    }
  }

  svg.linear-indicator {
    .progress {
      transform-origin: right;
    }

    &.indeterminate {
      .progress {
        animation: indeterminate-linear-progress-anim-rtl 2.8s linear infinite both;
      }
    }
  }

  svg.circular-indicator {
    transform: rotateZ(-90deg) scaleX(-1);
  }
}

// Keyframes - Linear indeterminate RTL
@keyframes indeterminate-linear-progress-anim-rtl {
  0% {
    transform: translateX(0%) scaleX(0.0001);
  }

  3.125%,
  53.125% {
    transform: translateX(0%) scaleX(0.2);
  }

  6.25% {
    transform: translateX(-20%) scaleX(0.3);
  }

  12.5%,
  62.5% {
    transform: translateX(-60%) scaleX(0.45);
  }

  25%,
  75% {
    transform: translateX(-100%) scaleX(1);
  }

  25.0001%,
  50%,
  75.0001%,
  100% {
    transform: translateX(0%) scaleX(0.0001);
  }
}