.progress-bar{
  @include hide-for(small only);
  overflow: auto;

  &__section{
    &--active{
      background: $cerulean;
    }

    &--inactive{
      background: $brand-blue-light;
    }

    &--completed{
      background: $brand-blue-dark;
    }
  }

  &--selected{
    background: $cerulean;
    color: $white;
  }

  &--completed{
    color: $white;
    background: $brand-blue-dark;
  }

  &__section-quarter{
    @include medium-3;
    position: relative;
    color: $white;
    overflow: hidden;
    padding: 6px 0;

    &:last-child:not(:first-child){
      float: none;
    }
  }
    &__section-title{

    }

    &__section-info{
      display: block;
    }

  &__arrow{
    width: 32px;
    height: 32px;
    position: absolute;
    right: -20px;
    top: -4px;

    @include breakpoint(medium down){
      display: none;
    }

    &::after{
      content: '';
      position: absolute;
      right: 0;
      border-color: transparent transparent transparent $brand-blue-light;
      border-style: solid;
      border-width: 35px;
    }

    &::before{
      content: '';
      position: absolute;
      right: -4px; //this controls the thickness of the arrow
      border-color: transparent transparent transparent $white;
      background: $brand-blue-light;
      border-style: solid;
      border-width: 35px;
    }

    &--selected::after{
      content: '';
      color: $white;
      position: absolute;
      right: 0;
      border-color: transparent transparent transparent $cerulean;
      border-style: solid;
      border-width: 35px;
    }

    &--selected:before{
      content: '';
      color: $white;
      position: absolute;
      right: -4px; //this controls the thickness of the arrow
      border-color: transparent transparent transparent $white;
      background: $brand-blue-light;
      border-style: solid;
      border-width: 35px;
    }

    &--completed::after{
      content: '';
      color: $white;
      position: absolute;
      right: 0;
      border-color: transparent transparent transparent $brand-blue-dark;
      border-style: solid;
      border-width: 35px;
    }

    &--completed:before{
      content: '';
      color: $white;
      position: absolute;
      right: -4px; //this controls the thickness of the arrow
      border-color: transparent transparent transparent $white;
      background: $cerulean;
      border-style: solid;
      border-width: 35px;
    }

    &--very-completed::after{
      content: '';
      color: $white;
      position: absolute;
      right: 0;
      border-color: transparent transparent transparent $brand-blue-dark;
      border-style: solid;
      border-width: 35px;
    }

    &--very-completed::before{
      content: '';
      color: $white;
      position: absolute;
      right: -4px; //this controls the thickness of the arrow
      border-color: transparent transparent transparent $white;
      background: $brand-blue-dark;
      border-style: solid;
      border-width: 35px;
    }
  }
}

.progress-bar-vertical{
  list-style: none;
  position: relative;

  &__guide{
    height: 100%;
    position: absolute;
    width: 2px;
    background-color: $stone;
    left: 17px;
  }

  &__step{
    @extend .clearfix;
    position: relative;
    margin-bottom: $base-margin*1.4;
  }

  &__icon{
    width: 37px;
    height: 37px;
    border-radius: 100%;
    display: inline-block;
    font-weight: 700;
    font-size: 23px;
    text-align: center;
    background-color: $stone;
    position: relative;
    float: left;

    &--active{
      @extend .progress-bar-vertical__icon;
      background-color: $brand-blue-light;
      color: $white;
    }

    &--complete{
      @extend .fa;
      @extend .fa-check;
      @extend .progress-bar-vertical__icon;
      background-color: $cerulean;
      color: $white;
      font-weight: normal;

      &::before{
        @include vertical-center;
        left: 0;
        width: 100%;
      }
    }
  }

  &__content{
    position: relative;
    float: left;
    margin-left: $base-margin*1.5;
    line-height: 16px;
    max-width: 74%;
  }

  &__content-remove{
    line-height: 23px;
    margin-left: $base-margin*0.35;
  }
}

.progress-bar-horizontal{
  list-style: none;
  position: relative;
  margin: 0 auto;
  display: table;
  width: 100%;
  @include clearfix;

  @include breakpoint(medium only){
    max-width: 546px;
  }

  &__guide{
    width: 80%;
    left: 10%;
    position: absolute;
    height: 2px;
    background-color: $stone;
    top: 70%;
  }

  &__step{
    position: relative;
    display: table-cell;

    @include breakpoint(medium only){
      margin-right: 9%;
    }
  }

  &__icon{
    width: 37px;
    height: 37px;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    font-weight: 700;
    font-size: 21px;
    text-align: center;
    background-color: $stone;
    position: relative;
    line-height: 37px;

    @include breakpoint(medium only){
      width: 50px;
      height: 50px;
      font-size: 26px;
      line-height: 50px;
    }

    &--active{
      @extend .progress-bar-horizontal__icon;
      background-color: $brand-blue-light;
      color: $white;
    }

    &--complete{
      @extend .fa;
      @extend .fa-check;
      @extend .progress-bar-horizontal__icon;
      background-color: $cerulean;
      color: $white;
      font-weight: normal;

      &::before{
        @include vertical-center;
        left: 0;
        width: 100%;
      }
    }
  }

  &__content{
    line-height: $base-font-size*1.5;
    text-align: center;
    margin-bottom: $base-margin*0.65;
    display: block;
    font-size: $base-font-size*0.85;

    @include breakpoint(medium only){
      font-size: $base-font-size;
    }
  }
}