$shipping-progress-bar-bg: #ddd !default;
$shipping-progress-bar: $black !default;
$shipping-progress-icon-size: 22px !default;
$shipping-progress-bar-border-radius: 20px !default;

.shipping-progress {
   background: $body-bg-alt;
   color: $black;
   display: flex;
   align-items: center;
   font-size: 16px;
   position: relative;
   padding: 24px 30px 24px 65px;
   width: 100%;

   .fc {
      color: $text-dark;
      font-size: $shipping-progress-icon-size;
      line-height: 1;
      position: absolute;
      left: 25px;
      top: 50%;
      transform: translateY(-50%);
      margin-top: -2px;
   }

   p {
      flex-grow: 1;
      margin: 0;
   }

   strong {
      color: $text-dark;
   }

   small {
      display: block;
   }

   .shipping-bar {
      background: $shipping-progress-bar-bg;
      border-radius: $shipping-progress-bar-border-radius;
      flex-grow: 1;
      height: 8px;
      margin-left: 20px;
      max-width: 320px;
      overflow: hidden;
      position: relative;
      width: 100%;

      span {
         background: $shipping-progress-bar;
         display: inline-block;
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         width: 100%;
      }
   }

   @media screen and (max-width: $sm - 1) {
      flex-wrap: wrap;

      .shipping-bar {
         margin-top: 10px;
         margin-left: 0;
      }
   }
}

.shipping-progress-badge {
   @include list-unstyled;

   margin: 25px 0;

   li {
      padding-left: 65px;
      position: relative;
      margin-bottom: 15px;
   }

   .fc {
      color: $black;
      position: absolute;
      left: 25px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
   }

   img {
      margin-left: 10px;
      height: auto;
   }
}

.cartbox-focus {
   .shipping-progress-outer {
      background: $body-bg-alt;
      padding-bottom: 10px;
      margin-bottom: 10px;
   }

   .shipping-progress {
      flex-wrap: wrap;

      .shipping-bar {
         margin: 10px 0 0;
      }
   }

   .shipping-progress-badge {
      margin: 0 0 0 65px;

      li {
         padding-left: 30px;
      }

      .fc {
         left: 0;
      }
   }
}
