/*
Pouzito v:
ordering.cart.tpl
ordering.summary.tpl
orderView.tpl
 */

$order-product-vertical-padding: 15px !default;
$order-product-image-width: 83px !default;

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

   p {
      margin: 0;
   }

   .product {
      border-bottom: 1px solid $border-color;
      display: flex;
      align-items: center;
      padding: $order-product-vertical-padding 0;
   }

   .image {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      padding: 0 5px;
      width: $order-product-image-width;
      height: 90px;
   }

   .title {
      flex-grow: 1;
      margin-left: 30px;

      a {
         @include underline-hover;
      }

      strong {
         color: $text-dark;
         display: block;
         font-size: 16px;
      }
   }

   .availability {
      flex: none;
      padding-left: 20px;
      text-align: right;
   }

   .availability-resp {
      display: none;
   }

   .pieces {
      display: flex;
      flex: none;
      margin: 0 10px 0 30px;
      width: 64px;
      position: relative;

      .form-control {
         flex-shrink: 1;
         //width: calc(100% - 50px); // 50px = sirka buy_count
         text-align: center;
      }
   }

   .price {
      flex: none;
      text-align: right;
      width: 12ch;

      strong {
         display: block;
         color: $text-dark;
         font-size: 22px;
         white-space: nowrap;
      }
   }

   .delete-product {
      @include underline-never;

      color: #919191;
      font-size: 18px;
      margin-left: 20px;
      margin-right: 5px;
      padding: 5px;
      transition: color $transition-speed;

      .fc::before {
         content: $icons_trash;
      }

      @include haf {
         color: $state-error;
      }
   }

   @media screen and (min-width: $lg) and (max-width: $xl - 1),
   screen and (max-width: $md - 1) {
      .title {
         margin-left: 20px;
      }

      .availability {
         display: none;
      }

      .availability-resp {
         display: block;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .product {
         position: relative;
         flex-wrap: wrap;
         align-items: flex-start;
         justify-content: space-between;
         padding-left: 136px;
      }

      .image {
         position: absolute;
         left: 0;
         top: 0;
         width: 116px;
         height: 126px;
      }

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

      .pieces {
         margin: 0;
      }

      .delete-product {
         position: absolute;
         margin: 0;
         left: 220px;
         bottom: 25px;
      }
   }

   @media screen and (max-width: $xs - 1) {
      .product {
         padding-left: calc(#{$order-product-image-width} + 10px);
      }

      .image {
         width: $order-product-image-width;
         height: 90px;
      }

      .delete-product {
         left: calc(#{$order-product-image-width} + 84px);
      }
   }
}
