/* Progress Bar */

.progress-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.progress-bar__track {
  background-color: var(--progress-track-bg);
  border-radius: var(--progress-track-border-radius);
  overflow: var(--progress-track-overflow);
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--progress-bar-border-radius);
  transition: var(--progress-bar-transition);
}

/* Sizes */
.progress-bar--sm .progress-bar__track {
  height: var(--progress-size-sm-height);
}
.progress-bar--md .progress-bar__track {
  height: var(--progress-size-md-height);
}
.progress-bar--lg .progress-bar__track {
  height: var(--progress-size-lg-height);
}

/* Variants */
.progress-bar--primary .progress-bar__fill {
  background-color: var(--progress-variant-primary-bar-bg);
}
.progress-bar--success .progress-bar__fill {
  background-color: var(--progress-variant-success-bar-bg);
}
.progress-bar--warning .progress-bar__fill {
  background-color: var(--progress-variant-warning-bar-bg);
}
.progress-bar--error .progress-bar__fill {
  background-color: var(--progress-variant-error-bar-bg);
}

.progress-bar__label {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-semantic-text-secondary);
}