$budget-colors: (
  "under": "success",
  "warning": "warning",
  "over": "danger",
);

.pot-summary {
  .pot-summary--budget-progress {
    @extend .progress;
    @extend .mb-4;

    height: 2rem;
  }

  h2 small {
    white-space: nowrap;
  }

  @each $type, $color in $budget-colors {
    &.pot-summary--#{$type}-budget {
      h2 {
        @extend .h4;
      }

      h2 small {
        color: theme-color($color);
      }

      .progress-bar {
        background-color: theme-color($color);
      }
    }
  }
}

.pot-summary {
  .pot-summary--budget-progress {
    @extend .progress;
    @extend .mb-4;

    height: 2rem;
  }

  h2 {
    @extend .h4;

    small {
      // If the pot title is too long to fit the status text in the
      // same line then wrap the entire status text to the next.
      white-space: nowrap;
     }
  }

  $budget-colors: (
    "under": "success",
    "warning": "warning",
    "over": "danger",
  );

  @each $type, $color in $budget-colors {
    &.pot-summary--#{$type}-budget {
      h2 small { color: theme-color($color); }
      .progress-bar { background-color: theme-color($color); }
    }
  }
}

Refactor the pt summary CSS
Refactor the pt summary CSS
