.progress-steps {
  @include make-md-column(10, 0);
  border-top: 1px solid $color__brand--light-grey;

  @include media-query-medium {
    border-top: 0;
  }
}

.progress-steps__list {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: $font__mns-london;
}

.progress-steps__item {
  @include rem(font-size, 15px);
  @include rem(padding-right, 20px);
  @include rem(margin, 10px 10px 10px 0);
  color: $color__brand--light-grey;
  display: inline-block;
  font-family: $font__mns-london;
  line-height: 0;
  position: relative;

  @include media-query-small {
    @include rem(font-size, 20px);
  }

  @include media-query-medium {
    @include rem(margin-bottom, 15px);
    @include rem(margin-top, 15px);
    @include rem(font-size, 25px);
  }

  &.icon--arrow-light::before {
    @include rem(font-size, 25px);
    position: absolute;
    right: 0;
    top: 0;

    @include media-query-medium {
      @include rem(font-size, 35px);
      @include rem(top, -5px);
    }
  }

  &:last-child {
    margin-right: 0;
    padding-right: 0;

    &::before {
      display: none;
    }
  }

  a {
    color: $color__brand--dark-grey;
    text-decoration: none;
  }
}

.progress-steps--tsop {
  @include rem(top, 3px);
  @include make-md-column(8, 0);
}

.progress-steps__link:focus {
  text-decoration: underline;
}

.progress-steps--current {
  color: $color__brand--black;
  font-family: $font__mns-london--bold;
}

.progress-steps--active {
  color: $color__brand--dark-grey;
}

.progress-steps--inactive {
  color: $color__brand--medium-grey;
}

.progress-steps__number {
  @include rem(line-height, 23px);
}