.d-progress-bar {
  width: 100%;
  background-color: var(--d-color-neutral-10);
  display: flex;
}

.d-progress-bar-complete {
  border-radius: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.3s ease;
}

.d-progress-bar-value-label {
  @extend .d-text-body-s;
  color: var(--d-color-neutral-00);
  font-size: inherit;
  line-height: 1;
}

.d-progress-bar-medium {
  height: 8px;
  border-radius: 8px;

  .d-progress-bar-value-label {
    font-size: 8px;
  }
}

.d-progress-bar-small {
  height: 4px;
  border-radius: 4px;

  .d-progress-bar-value-label {
    font-size: 4px;
  }
}

.d-progress-bar-primary {
  .d-progress-bar-complete {
    background-color: var(--d-color-red-60);
  }
}

.d-progress-bar-green {
  .d-progress-bar-complete {
    background-color: var(--d-color-green-60);
  }
}

.d-progress-bar-yellow {
  .d-progress-bar-complete {
    background-color: var(--d-color-yellow-60);
  }
}