.navds-progress-bar {
  background: var(--ax-bg-neutral-moderateA);
  position: relative;
  border-radius: var(--ax-border-radius-full);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
}

.navds-progress-bar--small {
  height: 0.75rem;
  min-width: 0.75rem;
}

.navds-progress-bar--medium {
  height: 1rem;
  min-width: 1rem;
}

.navds-progress-bar--large {
  height: 1.5rem;
  min-width: 1.5rem;
}

.navds-progress-bar__foreground {
  /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
  --__ac-progress-bar-translate: initial;

  transform: translateX(var(--__ac-progress-bar-translate));
  background: var(--ax-bg-info-strong);
  transform-origin: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: inherit;
  transition: transform 0.2s ease;
}

.navds-progress-bar__foreground--indeterminate {
  --__ac-progress-bar-simulated: initial;

  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-delay: 0s, var(--__ac-progress-bar-simulated);
}

/* navds-progress-bar-indeterminate wave animation */
@keyframes navds-progress-bar-indeterminate {
  0% {
    left: -50%;
    width: 50%;
    transform: translateX(0%);
  }

  50% {
    animation-direction: reverse;
    left: 100%;
    transform: translateX(0%);
    width: 50%;
  }

  100% {
    left: -50%;
    transform: translateX(0%);
    width: 50%;
  }
}

@keyframes navds-progress-bar-indeterminate-grow {
  0% {
    transform: translateX(-100%);
  }

  20% {
    transform: translateX(-80%);
  }

  30% {
    transform: translateX(-40%);
  }

  50% {
    transform: translateX(-20%);
  }

  75% {
    transform: translateX(-10%);
  }

  100% {
    transform: translateX(-10%);
  }
}

@media (forced-colors: active) {
  .navds-progress-bar__foreground {
    background: Highlight;
  }

  .navds-progress-bar {
    outline: 1px solid transparent;
    outline-offset: -1px;
  }
}
