$order-process-bg: $body-bg !default;
$order-process-color: $body-color !default;
$order-process-color-active: $black !default;
$order-process-step-bg: $body-bg !default;
$order-process-step-color: $black !default;
$order-process-step-bg-active: $black !default;
$order-process-step-color-active: $white !default;

.order-process-container {
   background: $order-process-bg;
   margin-bottom: 50px;

   @media screen and (max-width: $xs - 1) {
      margin-bottom: 20px;
   }
}

.order-process {
   display: flex;
   margin: 0 auto;
   max-width: 550px;
   counter-reset: counter;
}

.order-process-step {
   color: $order-process-color;
   padding: 0 5px;
   position: relative;
   text-align: center;
   width: 25%;

   &::before {
      background: $order-process-step-bg;
      border: 1px solid $border-color;
      border-radius: 50%;
      counter-increment: counter;
      content: counter(counter);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      position: relative;
      width: 38px;
      height: 38px;
      z-index: 1;
      font-size: 1rem;
      font-weight: $font-weight-bold;
      color: $order-process-step-color;
   }

   &::after {
      border-top: 1px solid $border-color;
      content: '';
      display: block;
      position: absolute;
      top: 19px;
      width: 100%;
   }

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

   &:last-child {
      &::before {
         @include fonticon;

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

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

   &.active {
      color: $order-process-color-active;
      font-weight: $font-weight-bold;

      &::before {
         border-color: $order-process-step-bg-active;
         background: $order-process-step-bg-active;
         color: $order-process-step-color-active;
      }
   }

   &.visited {
      @include underline-never;

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

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


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

   @media screen and (max-width: 420px) {
      font-size: 0;

      &::before {
         margin-bottom: 0;
      }
   }
}
