@import "@css/base/variables.b2b";
@import "@css/base/_mixins";
@import "@css/page/product/_product-submit-block";

.catalog-b2b-list {
   display: flex;
   align-self: center;
   justify-content: space-between;
   border: 1px solid $border-color;
   margin-top: -1px;

   a {
      @include underline-never;
   }

   p {
      margin-bottom: 0;
   }
}

.catalog-b2b-list-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex: 1;
   padding: 7px 10px;
   line-height: $line-height-sm;
   font-size: $font-size-smaller;

   .img {
      width: 70px;
      margin-right: 15px;
   }

   .title-delivery-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;

      .title {
         font-size: $font-size-base;
         color: $text-dark;
      }

      .code {
         color: $text-muted;
      }
   }

   .delivery-wrapper {
      text-align: right;
      padding-left: 20px;

      .delivery {
         white-space: nowrap;
      }
   }

   .price-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-left: 15px;
      padding-right: 15px;
      text-align: right;
      width: 230px;

      .flag {
         margin-right: auto;
      }

      .price {
         font-weight: $font-weight-bold;
         color: $text-dark;

         strong {
            font-size: $font-size-h5;
         }
      }

      .price-mox {
         color: $text-muted;
      }

      .strike-price {
         + .price {
            color: $discount-color;
         }
      }
   }
}

.catalog-b2b-list-form-wrapper {
   display: flex;
   align-items: center;
   width: 300px;
   padding: 10px;

   > div,
   form {
      width: 100%;
   }

   .submit-block {
      margin: 0;
   }

   .buy-count-wrapper {
      .form-control {
         width: 47px;
         min-height: 47px;
         padding: 0;
      }
   }

   .btn {
      padding-right: 0;
      padding-left: 0;
      border-radius: $border-radius-base;
      font-size: $font-size-smaller;

      .fc {
         position: absolute;
         right: 20px;
         transform: translateY(50%);
      }

      &.active .fc {
         transform: rotate(180deg) translateY(-50%);
      }
   }
}

.catalog-b2b-list-variations-wrapper {
   background: $body-bg-alt;
   margin-left: 35px;

   .catalog-b2b-list-content {
      .price-wrapper {
         flex-direction: column;
         align-items: flex-end;

         .price {
            align-items: center;

            strong {
               margin-right: 5px;
            }
         }
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .catalog-b2b-list {
      flex-wrap: wrap;
   }

   .catalog-b2b-list-form-wrapper {
      margin-left: auto;
   }
}

@media screen and (max-width: $md - 1) {
   .catalog-b2b-list-content {
      flex-wrap: wrap;

      .title-delivery-wrapper {
         flex: calc(100% - 85px);
      }

      .price-wrapper {
         margin-left: auto;
      }
   }
}
