.navds-progress-bar {
  background: var(--a-surface-neutral-subtle);
  position: relative;
  border-radius: var(--a-border-radius-full);
  overflow: hidden;
  box-shadow:
    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
}

.navds-progress-bar--small {
  height: 12px;
  min-width: 12px;
}

.navds-progress-bar--medium {
  height: 16px;
  min-width: 16px;
}

.navds-progress-bar--large {
  height: 24px;
  min-width: 24px;
}

.navds-progress-bar__foreground {
  --__ac-progress-bar-translate: initial;

  transform: translateX(var(--__ac-progress-bar-translate));
  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
  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;
  }
}
