$shipping-progress-icon-size: 22px;
$shipping-progress-bar-border-radius: $border-radius;

@import "@css[shared]/components/_shipping-progress";

.shipping-progress-wrapper {
   border-radius: $border-radius;
   background: $body-bg-alt;
   display: flex;
   align-items: center;
   margin-bottom: $spacer-lg;
   position: relative;
   padding: 20px $shipping-progress-icon-size * 1.5 0;
   width: 100%;

   .fc {
      color: $text-dark;
      font-size: $shipping-progress-icon-size;
      line-height: 1;
      position: absolute;
      left: 0;
      top: calc(50% - (#{$shipping-progress-icon-size} / 2));
   }

   p {
      margin: 0;
   }

   .shipping-progress,
   .cart-badges {
      margin-bottom: 25px;
      margin-right: 20px;
      width: calc(50% - 20px);

      @media screen and (max-width: $sm - 1) {
         width: 100%;
      }
   }

   .cart-badges {
      padding-left: $shipping-progress-icon-size * 1.5;
      position: relative;
   }

   @media screen and (max-width: $xl - 1) and (min-width: $lg), screen and (max-width: $md - 1) {
      flex-wrap: wrap;

      .shipping-progress,
      .cart-badges {
         margin-right: 0;
         width: 100%;

         p {
            line-height: $line-height-sm;
         }
      }
   }
}
