Wybor zestawow - poczatek prac

style.less

@@ -226,7 +226,20 @@
 
 
 // WERSJE
-.idm__hotspot:has(.product__versions){
+@keyframes idmPulseOpacity {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.idm__hotspot .product.--loading{
+  animation: idmPulseOpacity 3s infinite;
+}
+.idm__hotspot .product:has(.product__versions){
+  --idm-hotspot-version-height: 55px;
   .product__versions{
     display: grid;
     grid-template-columns: repeat(5, 1fr);
@@ -237,6 +250,24 @@
     padding: 0.3rem 1rem;
     position: absolute;
     top: 0;
+
+
+    height: var(--idm-hotspot-version-height);
+    align-items: center;
+  }
+  .product__version_single{
+    display: flex;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    transition: border 0.2s;
+    &:hover{
+      border-color: #111;
+    }
+    &.--active{
+      border-color: var(--primary-color, #111);
+      box-shadow: 0 0 1px 1px var(--primary-color, #111);
+    }
   }
   .product__content_wrapper{
     position: relative;
@@ -244,9 +275,9 @@
   .label_icons, .product__versions{
     transition: all 0.2s;
   }
-  .product:hover{
+  &:hover{
     .product__versions, .label_icons{
-      transform: translateY(-100%);
+      transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
     }
     .product__versions{
       clip-path: inset(0 0 0 0);