$active-step-background-color: $brand-primary !default;

.order-process-container {
   margin: 0 auto 30px;
   max-width: $cart-form-width;
}

.order-process {
   display: flex;
   justify-content: flex-start;
   counter-reset: counter;
}

.order-process-step {
   display: flex;
   align-items: center;
   position: relative;

   &::before {
      background: $body-bg;
      border: 1px solid $border-color;
      border-radius: 50%;
      color: $text-dark;
      content: counter(counter);
      counter-increment: counter;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: $font-size-larger;
      font-weight: $font-weight-bold;
      margin-right: 13px;
      position: relative;
      width: 38px;
      height: 38px;
      z-index: 1;
   }

   &::after {
      border-top: 1px solid $border-color;
      content: "";
      display: inline-block;
      width: 50px;
      margin: 0 15px;
   }

   &:last-child {
      @media screen and (min-width: $md) {
         @include delete-after;
      }

      &::before {
         @include fonticon;

         content: $icons_check;
         display: flex;
         align-items: center;
         font-size: 1rem;
      }
   }

   &.active {
      font-size: $font-size-larger;
      font-weight: $font-weight-bold;

      &::before {
         border-color: $active-step-background-color;
         background: $active-step-background-color;
         color: $white;
      }

      &.order-process-laststep::before {
         color: $white;
         background: $state-success;
         border-color: $state-success;
      }
   }

   &.visited {
      @include underline-never;

      &::before {
         transition: all $transition-speed;
      }

      @include haf {
         &::before {
            border-color: $active-step-background-color;
            background: $active-step-background-color;
            color: $white;
         }
      }
   }
}

@media screen and (max-width: $md - 1) {
   .order-process {
      margin: 0 auto;
      max-width: 550px;
      justify-content: center;
   }

   .order-process-step {
      flex-direction: column;
      padding: 0 5px;
      text-align: center;
      width: 25%;
      font-size: $font-size-smaller;

      &::before {
         margin: 0 auto 8px;
      }

      &::after {
         position: absolute;
         top: 19px;
         width: 100%;
         margin: 0;
      }

      &:first-child::after {
         right: -5px;
         width: 50%;
      }

      &:last-child::after {
         left: -5px;
         width: 50%;
      }

      &.active {
         font-size: $font-size-smaller;
      }
   }
}

@media screen and (max-width: 599px) {
   .order-process-step {
      flex-grow: 1;
      width: auto;
   }
}
