add idm-search-hotspot-tab

demo-tabs/idm-search-hotspot-tab/style.less

@@ -0,0 +1,127 @@
+.idm-search-hotspot-tab {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  @media @laptop {
+    gap: 3.2rem;
+  }
+
+  & .bmFavourites {
+    display: none;
+  }
+
+  &__search-wrapper {
+    width: 100%;
+    background-color: @idm-tabs__secondary-background-gray;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    padding: 1.6rem 2.4rem;
+  }
+
+  &__search {
+    line-height: @idm-tabs__lineheight-l;
+    font-size: @idm-tabs__mobile-body-medium;
+    border: none;
+    width: 100%;
+    background: transparent;
+    font-weight: @idm-tabs__weight-bold;
+    color: @idm-tabs__primary-black;
+
+    &::placeholder {
+      color: @idm-tabs__primary-black;
+    }
+  }
+
+  &__search-icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  & .products {
+    gap: 4.8rem !important;
+  }
+
+  & .product {
+    &__name {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 150%;
+      max-height: calc(1.5em * 2);
+    }
+
+    &--hidden {
+      display: none !important;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      right: -2.4rem;
+      top: 0;
+      height: 80%;
+      width: 1px; // Wpisane na sztywno (divider-thin)
+      background-color: @idm-tabs__secondary-outline-gray;
+      z-index: 67;
+    }
+
+    &:nth-child(2n)::after {
+      display: none;
+      @media @tablet {
+        display: block;
+      }
+    }
+
+    &:nth-child(4n)::after {
+      @media @tablet {
+        display: none;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      display: none;
+      bottom: -2.4rem;
+      left: 0;
+      background-color: @idm-tabs__secondary-outline-gray;
+      height: 1px;
+    }
+
+    // mobile
+    &:nth-child(2n + 1)::before {
+      display: block;
+      width: calc(200% + 4.8rem);
+      @media @tablet {
+        display: none;
+      }
+    }
+
+    // desktop
+    &:nth-child(4n - 3):before {
+      @media @tablet {
+        display: block;
+        width: calc(400% + 3 * 4.8rem);
+      }
+    }
+
+    &:nth-last-child(-n + 4)::before {
+      @media @tablet {
+        display: none;
+      }
+    }
+  }
+}