$sticky-product-price-block-margin: 5px !default;

.product-sticky-info-wrapper {
   background: $body-bg;
   border-bottom: 1px solid $border-color;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;

   &.is-stuck {
      border: 0;
      box-shadow: $box-shadow;
      min-height: 70px;
      z-index: 100;

      .product-sticky-info {
         opacity: 1;
      }
   }

   &.is-stuck .tabs .nav-link {
      padding: 0;
   }
}

.product-sticky-info {
   display: flex;
   opacity: 0;
   align-items: center;
   flex: 1;
   max-width: 410px;
   position: absolute;
   right: 20px;

   .img {
      @include image-bg;

      margin-right: 15px;

      img {
         padding: 5px;
         height: 60px;
         width: auto;
      }
   }

   .content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;

      > div:first-child {
         display: flex;
         flex-direction: column;
         justify-content: center;
         line-height: $line-height-sm;
         padding-right: 15px;
      }
   }

   .title {
      color: $text-dark;
      font-size: $font-size-smaller;
      font-weight: $font-weight-bold;
      line-height: $line-height-md;
      margin: 0;
      display: block;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .product-price-block {
      margin-bottom: $sticky-product-price-block-margin;

      .price {
         color: $text-dark;
         font-size: $font-size-smaller;
         margin-right: 10px;
      }

      .price-common {
         font-size: $font-size-smaller;
      }

      .discount {
         display: none;
      }
   }

   .delivery {
      font-size: $font-size-smaller;
      margin-bottom: 0;
   }

   .btn-link {
      @include underline-never;

      white-space: nowrap;
   }
}

@media screen and (max-width: $xl - 1) {
   .product-sticky-info-wrapper.is-stuck {
      .tabs {
         justify-content: flex-start;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .product-sticky-info-wrapper {
      display: none;
   }
}
