.root {
  height: 3px;
  background: var(--status-info-bg);
  overflow: hidden;
}

.fill {
  height: 100%;
  width: var(--progress-bar-width, 0%);
  background: var(--progress-bar-color, var(--status-info-fg));
  transition: width var(--duration-slower) var(--ease-out);
}

.success {
  --progress-bar-color: var(--status-success-fg);
}

.warning {
  --progress-bar-color: var(--status-warning-fg);
}

.error {
  --progress-bar-color: var(--status-danger-fg);
}

.info {
  --progress-bar-color: var(--status-info-fg);
}

.neutral {
  --progress-bar-color: var(--text-disabled);
}

.indeterminate .fill {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
}

.indeterminate .fill::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--progress-bar-color, var(--status-info-fg));
  animation: progressBarIndeterminate 1.2s var(--ease-out) infinite;
}

@keyframes progressBarIndeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}
