$product-compare-header-box-shadow: 0 4px 10px rgba($black, .1) !default;
$product-compare-header-bg: $body-bg !default;

.compare-header {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   background: $product-compare-header-bg;
   box-shadow: $product-compare-header-box-shadow;
   z-index: 99;

   .items-wrapper {
      display: flex;
   }

   .compare-header-overflow {
      overflow: hidden;
      margin-left: $product-compare-item-width;
   }

   .item-sm {
      flex: 0 0 $product-compare-item-width;
      padding: 10px $grid-gutter-width;

      a {
         display: flex;
         align-items: center;
         text-decoration: none;

         @include haf {
            text-decoration: none;

            .title {
               text-decoration: underline;
            }
         }
      }

      .img {
         width: 65px;
      }

      .content {
         padding-left: 10px;
      }

      p {
         margin: 0;
      }

      .title {
         color: $text-dark;
         line-height: $line-height-sm;
         font-weight: $font-weight-bold;
         overflow: hidden;
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;
      }

      .price {
         color: $text-dark;
      }
   }

   @media screen and (max-width: $md - 1) {
      .compare-header-overflow {
         margin-left: $product-compare-item-width-sm;
      }

      .item-sm {
         flex: 0 0 $product-compare-item-width-sm;
      }
   }

   @media screen and (max-width: $xs - 1) {
      .compare-header-overflow {
         margin-left: $product-compare-item-th-width-tiny;
      }
   }
}
