/*
  progress (linear bar):
  indeterminate: no value attribute (:indeterminate)
  
  svg (circular spinner):
  indeterminate: .a-loading-indicator-indeterminate (determinate default)
*/

.a-loading-indicator:is(progress) {
  --height: var(--lens-core-spacing-1-5);
  --radius: var(--lens-semantic-radius-full);
  --border-color: var(--lens-semantic-color-outline-default);
  --border-width: var(--lens-semantic-border-width-thin);
  --padding: var(--lens-core-spacing-0-5);
  --bg: var(--lens-core-color-transparent);
  --value-bg: var(--lens-semantic-gradients-primary-default);
  --speed: 1.2s;
  box-sizing: border-box;
  height: var(--a-loading-indicator-height, var(--height));
  border-radius: var(--a-loading-indicator-radius, var(--radius));
  padding: calc(
    var(--a-loading-indicator-padding, var(--padding)) -
      var(--a-loading-indicator-border-width, var(--border-width))
  );
  border: var(--a-loading-indicator-border-width, var(--border-width)) solid
    var(--a-loading-indicator-border-color, var(--border-color));
  background-color: var(--a-loading-indicator-bg, var(--bg));
  overflow: clip;
  &::-webkit-progress-bar,
  &::-moz-progress-bar {
    border-radius: var(--a-loading-indicator-radius, var(--radius));
  }
  &::-webkit-progress-bar {
    background: var(--a-loading-indicator-bg, var(--bg));
  }
  &::-webkit-progress-value {
    background: var(--a-loading-indicator-value-bg, var(--value-bg));
    border-radius: var(--a-loading-indicator-radius, var(--radius));
  }
  &:indeterminate::-webkit-progress-value {
    animation: a-loading-indicator-linear-anim var(--a-loading-indicator-speed, var(--speed))
      infinite linear;
  }
  &::-moz-progress-bar {
    background: var(--a-loading-indicator-value-bg, var(--value-bg));
  }
  &:indeterminate::-moz-progress-bar {
    animation: a-loading-indicator-linear-anim var(--a-loading-indicator-speed, var(--speed))
      infinite linear;
  }
}

.a-loading-indicator:is(svg) {
  --height: var(--a-loading-indicator-height, var(--lens-core-spacing-7));
  --track-width: var(--a-loading-indicator-track-width, var(--lens-semantic-border-width-thin));
  --track-color: var(
    --a-loading-indicator-track-color,
    var(--lens-semantic-color-ui-loading-variant)
  );
  --value-width: var(--a-loading-indicator-value-width, 7px);
  --value-color: var(
    --a-loading-indicator-value-color,
    var(--lens-semantic-color-action-primary-default)
  );
  --speed: var(--a-loading-indicator-speed, 1.2s);
  --pi: 3.14159265359;
  --radius: 45;
  --circumference: calc(2 * var(--pi) * var(--radius));
  --value: var(--a-loading-indicator-value, 0);
  width: var(--height);
  height: var(--height);
  overflow: visible;
  &.a-loading-indicator--indeterminate {
    animation: a-loader-rotate-anim var(--speed) infinite linear;
    & .a-loading-indicator-value {
      stroke-dasharray: var(--circumference);
      stroke-dashoffset: 280;
      transform-origin: 50% 50%;
      animation: a-loader-dash-anim var(--speed) infinite ease-in-out;
    }
  }
  &:not(.a-loading-indicator--indeterminate) {
    transform: rotate(-90deg);
    & .a-loading-indicator-value {
      stroke-dasharray: var(--circumference);
      stroke-dashoffset: calc(var(--circumference) - (var(--value) / 100 * var(--circumference)));
      transition: stroke-dashoffset 0.3s ease;
    }
  }
  &.a-loading-indicator--md {
    --height: var(--a-loading-indicator-height, var(--lens-core-spacing-4));
  }
  &.a-loading-indicator--sm {
    --height: var(--a-loading-indicator-height, var(--lens-core-spacing-2-5));
  }
}

.a-loading-indicator-track,
.a-loading-indicator-value {
  fill: none;
  cx: 50px;
  cy: 50px;
  r: 45px;
}

.a-loading-indicator-track {
  stroke-width: var(--track-width);
  stroke: var(--track-color);
}

.a-loading-indicator-value {
  stroke-linecap: round;
  stroke-width: var(--value-width);
  stroke: var(--value-color);
}

@keyframes a-loader-dash-anim {
  0% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}

@keyframes a-loader-rotate-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes a-loading-indicator-linear-anim {
  0% {
    margin-inline-start: 0%;
    inline-size: 0;
  }
  20% {
    margin-inline-start: 0%;
    inline-size: 20%;
  }
  50% {
    margin-inline-start: 55%;
    inline-size: 45%;
  }
  100% {
    margin-inline-start: 100%;
    inline-size: 0;
  }
}