$progress-title-color: $blue-d1 !default;
$progress-complete-color: $blue-u1 !default;
$progress-incomplete-color: $gray-l3 !default;
$progress-complete-number-color: $blue-d1 !default;
$progress-incomplete-number-color: $gray !default;
$progress-number-label-color: palette(grayscale, base) !default;

.program-progress {
  width: 300px;
  margin: 0 auto 30px;

  @media (min-width: $bp-screen-md) {
    margin-left: 0;
  }
}

.progress-heading {
  color: $progress-title-color;
  text-align: center;
  margin-bottom: 0;
  font: {
    size: 1.1em;
    weight: 700;
  }
}

.progress-circle-wrapper {
  position: relative;
  margin-top: -20px;
  width: 300px;
  height: 300px;

  .progress-label {
    position: absolute;
    width: 100%;
    top: 92px;
    text-align: center;
  }

  .numbers {
    font-size: 3em;
    color: $progress-incomplete-number-color;

    .complete {
      color: $progress-complete-number-color;
    }
  }

  .label {
    font: {
      size: 1.1em;
      weight: 600;
    }

    color: $progress-number-label-color;
  }
}

.progress-circle {
  .complete {
    stroke: $progress-complete-color;
  }

  .incomplete {
    stroke: $progress-incomplete-color;
  }
}