$order-product-vertical-padding: 8px;
$order-product-image-width: 74px;

@import "@css[shared]/page/order/_order-products";

.order-products {
   padding-bottom: 20px;

   .image {
      @include image-bg;

      padding: 3px;
   }

   .title {
      font-size: $font-size-smaller;
      font-weight: $font-weight-medium;
      margin-left: 20px;
   }

   .variation {
      font-size: $font-size-smaller;
   }

   .availability {
      width: auto;
   }

   .pieces {
      border: 1px solid $border-color;
      border-radius: $border-radius;
      margin-left: 40px;
      margin-right: 25px;
      width: 83px;

      .form-control {
         border: 0;
         font-size: $font-size-base;
         padding: 5px;
         width: 50px;
      }
   }

   .delete-product {
      color: $text-muted;
      margin-left: 15px;
   }

   .price-total {
      font-size: $font-size-larger;
      font-weight: 400;
   }

   .price-total-with-discount {
      width: 155px;

      .flag {
         height: auto;
         line-height: $line-height-base;
         margin: 0;
      }

      div strong {
         font-size: $font-size-larger;
      }
   }

   .product:last-child {
      border-bottom: 0;
   }
}

@media screen and (min-width: $lg) and (max-width: $xl - 1), screen and (max-width: $md) {
   .order-products:not(.order-products-summary) {
      .product {
         flex-wrap: wrap;
         align-items: flex-start;
         justify-content: flex-start;
         position: relative;
         padding-left: 84px;
      }

      .image {
         position: absolute;
         top: 5px;
         left: 0;
      }

      .title {
         margin-bottom: 10px;
         width: 100%;
      }

      .availability {
         display: none;
      }

      .availability-resp {
         display: block;
         font-size: $font-size-smaller;
      }

      .pieces {
         position: static;
         margin-left: 20px;
      }

      .price-total {
         position: absolute;
         right: 0;
         bottom: 5px;
      }

      .delete-product {
         align-self: flex-end;
         margin-bottom: 13px;
         margin-left: 0;
         order: 1;
      }
   }
}

@media screen and (min-width: $md) and (max-width: $lg - 1) {
   .order-products {
      .availability {
         display: block;
      }

      .availability-resp {
         display: none;
      }
   }
}

@media screen and (max-width: $xs - 1) {
   .order-products:not(.order-products-summary) {
      .title,
      .pieces {
         margin-left: 7px;
      }

      .pieces {
         width: 70px;
         margin-right: 10px;

         .form-control {
            min-height: 45px;
            width: 45px;
         }
      }

      .price-total-with-discount {
         flex-direction: column;
         align-items: flex-end;
         width: auto;

         .flag {
            margin-bottom: 5px;
         }
      }
   }
}
