.steps {
  @include make-col(12);
  @include make-col-ready;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0;
  z-index: 1;

  &-container {
    @include make-container;
    @include make-container-max-widths;
    position: relative;
    padding: 0 35px;
    margin: -6px 0 30px;
  }
}

.section {
  &-row {
    display: flex;
    justify-content: center;
  }

  &-col {
    @include make-col(12);
  }
}

.step {
  &-item {
    font-weight: 700;
    font-size: .875rem;
    background-color: $white;
    text-align: center;

    &:not(:first-child)::after {
      content: '';
      width: 45%;
      border-bottom: 3px solid $gray;
      position: absolute;
      top: 30px;
      transform: translateX(-100%);
    }

    &__wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  &-icon {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid $gray;
    border-radius: 50%;
    margin-bottom: .5rem;
    background-color: $white;
    z-index: 1;

    .icon-element {
      height: 20px;
      width: 40px;
      color: $warm-grey;
    }
  }

  &-txt {
    color: $warm-grey;
    font-weight: 400;
    text-align: center;
  }
}

@include media-breakpoint-up(lg) {
  .steps {
    &-container {
      margin: -6px 0 20px;
    }
  }

  .section {
    &-col {
      @include make-col(7);
    }
  }

  .step {
    &-item {
      font-size: 1rem;
    }
  }
}

$itemQuantity: 3;

@while $itemQuantity >= 0 {
  [data-active-step-index='#{$itemQuantity}']  {
    @for $i from 0 through $itemQuantity {
      [data-step-index='#{$i}'] {
        .step {
          &-icon {
            border: 3px solid $blue-dark;

            .icon-element {
              color: $blue-dark;
            }
          }

          &-txt {
            color: $blue-dark;
            font-weight: 700;
          }
        }

        &.step-item:not(:first-child) {
          &::after {
            border-bottom: 3px solid $blue-dark;
          }
        }
      }
    }
  }
  $itemQuantity: $itemQuantity - 1;
}