.steps-block {
  @include make-col(12);
  @include make-col-ready;
  margin-bottom: 35px;
}

.steps-wrap {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 1.125rem;
  line-height: 1.3125rem;

  &__item {
    position: relative;
    display: inline-flex;
    align-items: center;

    &::before {
      content: '';
      width: 50px;
      height: 3px;
      background: $gray;
      position: absolute;
      top: 50%;
      left: -80px;
    }

    &:first-child::before {
      content: none;
    }

    &-icon {
      padding: 10px;
      border-radius: 50%;
      border: 3px solid $gray-bg;
      background-color: $white;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-element {
        position: relative;
        height: 15px;
        width: 15px;
        color: $blue-ocean;
      }
    }

    &-text {
      display: none;
    }
  }
}

@include media-breakpoint-up(md) {
  .steps-block {
    margin: 20px 0 40px;
  }

  .steps-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 0 30px;

    &__item {
      &-icon {
        margin-right: 10px;
        width: 66px;
        height: 66px;

        .icon-element {
          height: 20px;
          width: 20px;
        }
      }

      &::before {
        width: 20px;
        left: -25px;
      }

      &-text {
        display: flex;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .steps-wrap {
    &__item {
      &-icon {
        margin-right: 20px;
      }

      &::before {
        content: '';
        width: 50px;
        left: -80px;
      }

      &.steps-instore {
        &::before {
          left: -70px;
        }  
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .steps-wrap {
    padding-left: 100px;
    padding-right: 100px;
  }
}

@include media-breakpoint-only(xs) {
  .steps-wrap {
    &__item {
      &::before {
        width: 20px;
        left: -55px;
      }
    }
  }
}

@media (min-width: 320px) and (max-width: 340px) {
  .steps-wrap {
    &__item {
      &::before {
        width: 20px;
        left: -25px;
      }
    }
  }
}

@media (min-width: 340px) and (max-width: 360px) {
  .steps-wrap {
    &__item {
      &::before {
        left: -25px;
      }
    }
  }
}

@media (min-width: 360px) and (max-width: 380px) {
  .steps-wrap {
    &__item {
      &::before {
        left: -34px;
      }
    }
  }
}

@media (min-width: 380px) and (max-width: 425px) {
  .steps-wrap {
    &__item {
      &::before {
        left: -40px;
      }
    }
  }
}

@media (min-width: 425px) and (max-width: 465px) {
  .steps-wrap {
    &__item {
      &::before {
        left: -40px;
      }
    }
  }
}

$itemQuantity: 4;

@while $itemQuantity >= 0 {
  [data-active-step-index='#{$itemQuantity}']  {
    @for $i from 0 through $itemQuantity {
      [data-step-index='#{$i}'] {
        font-weight: 400;
        color: $gray-dark;

        .steps-wrap__item-icon {
          border-color: $blue-ocean;
        }

        @include media-breakpoint-down(sm) {
          .steps-wrap__item-icon .icon-element {
            color: $blue-ocean;
          }
        }
      }
    }
  }
  $itemQuantity: $itemQuantity - 1;
}