.order-steps {
  $back-icon-size:                                          30px !default;
  min-height:                                               $order-steps-min-height;
  position:                                                 relative;

  .step-indicator.has-value {
    display:                                                flex !important;
    justify-content:                                        center;
    text-align:                                             center;
    flex-direction:                                         column;
    height:                                                 $order-step-icon-size !important;
    border-radius:                                          $order-step-icon-size !important;
    width:                                                  $order-step-icon-size !important;
    color:                                                  $medium;
    border:                                                 solid 2px $medium;
    background:                                             $order-step-icon-color !important;
  }

  .active, .past {
    .step-indicator.has-value {
      background:                                           $primary;
      border:                                               solid 2px $primary;
    }
  }
  .past {
    .step-indicator.has-value {
      color: $primary;
    }
  }
  .active {
    .step-indicator.has-value {
      color:                                                $white;
      background:                                           $primary !important;
    }
  }
}
