.ProgressBarActive {
  width: calc(var(--b-progress-bar-value) * 100%);
  height: 100%;
  border-radius: var(--radius-3);
  transition: width var(--motion-transition-fast);
}

.ProgressBar {
  width: var(--b-progress-bar-width);
  border-radius: var(--radius-3);
  transition: width var(--motion-transition-fast);

  &:where(.size-s) {
    height: 4px;
  }

  &:where(.size-m) {
    height: 6px;
  }

  &:where(.variant-green, .variant-monochrome) {
    background-color: var(--color-fill-neutral-light);
  }

  &:where(.variant-green-alt) {
    background-color: var(--color-fill-absolute-white);
  }

  &:where(.variant-green, .variant-green-alt) .ProgressBarActive {
    background: linear-gradient(
      90deg,
      var(--color-gradient-green) 0%,
      var(--color-gradient-green-heavy) 100%
    );

    &:where(.dark-theme) {
      background: linear-gradient(
        90deg,
        var(--color-gradient-green-heavy) 0%,
        var(--color-gradient-green) 100%
      );
    }
  }

  &:where(.variant-monochrome) .ProgressBarActive {
    background: linear-gradient(
      90deg,
      var(--color-fill-neutral-light) 0%,
      var(--color-fill-neutral-heavy) 100%
    );
  }
}