$RADIAL_PROGRESS_STEPS: 100;
$RADIAL_PROGRESS_INCREMENT: 360 / $RADIAL_PROGRESS_STEPS;  // i.e. how many degrees per step
$RADIAL_PROGRESS_DIAMETER: 140px;
$RADIAL_PROGRESS_OVERLAY_DIAMETER: 100px;
$RADIAL_PROGRESS_BORDER_WIDTH: 4px;
$RADIAL_PROGRESS_FONT_SIZE: 36px;
$RADIAL_PROGRESS_ERROR_PERCENTAGE: 50;
$RADIAL_PROGRESS_ALERT_PERCENTAGE: 80;

.progress-radial {
  position: relative;
  width: $RADIAL_PROGRESS_DIAMETER;
  height: $RADIAL_PROGRESS_DIAMETER;
  border: $RADIAL_PROGRESS_BORDER_WIDTH solid $PRIMARY_BORDER_COLOR;
  @include border-radius(50%);

  & > span {
    position: absolute;
    width: $RADIAL_PROGRESS_OVERLAY_DIAMETER;
    height: $RADIAL_PROGRESS_OVERLAY_DIAMETER;
    background-color: $WHITE_BACKGROUND_COLOR;
    margin-top: ($RADIAL_PROGRESS_DIAMETER - $RADIAL_PROGRESS_OVERLAY_DIAMETER) / 2 - $RADIAL_PROGRESS_BORDER_WIDTH;
    margin-left: ($RADIAL_PROGRESS_DIAMETER - $RADIAL_PROGRESS_OVERLAY_DIAMETER) / 2 - $RADIAL_PROGRESS_BORDER_WIDTH;
    text-align: center;
    line-height: $RADIAL_PROGRESS_OVERLAY_DIAMETER;
    color: $SECONDARY_FONT_COLOR;
    font-size: $RADIAL_PROGRESS_FONT_SIZE;
    font-weight: bold;
    border: $RADIAL_PROGRESS_BORDER_WIDTH solid $PRIMARY_BORDER_COLOR;
    @include border-radius(50%);
  }

  @for $i from 0 through $RADIAL_PROGRESS_STEPS {
    &.progress-#{$i} {
      $barColor: $ERROR_COLOR;
      @if $i >= $RADIAL_PROGRESS_ALERT_PERCENTAGE {
        $barColor: $SUCCESS_COLOR;
      }
      @else if $i >= $RADIAL_PROGRESS_ERROR_PERCENTAGE {
        $barColor: $ALERT_COLOR;
      }

      @if $i < ($RADIAL_PROGRESS_STEPS / 2) {
        $nextDegree: 90deg + ($RADIAL_PROGRESS_INCREMENT * $i);
        @include background-image(linear-gradient(90deg, $SECONDARY_BACKGROUND_COLOR 50%, transparent 50%, transparent), linear-gradient($nextDegree, $barColor 50%, $SECONDARY_BACKGROUND_COLOR 50%, $SECONDARY_BACKGROUND_COLOR));
      }
      @else {
        $nextDegree: -90deg + ($RADIAL_PROGRESS_INCREMENT * ($i - ($RADIAL_PROGRESS_STEPS / 2)));
        @include background-image(linear-gradient($nextDegree, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $SECONDARY_BACKGROUND_COLOR 50%, $SECONDARY_BACKGROUND_COLOR));
      }

      & > span:before {
        content: "#{$i}%";
      }
    }
  }
}