FEATURE introducing the like button feature

resources/css/components/post-header.css

@@ -65,7 +65,7 @@
   }
 
   .post-details {
-    @apply flex flex-wrap justify-between gap-28 mt-12;
+    @apply flex flex-wrap justify-between gap-28 gap-y-8 mt-12;
     grid-template-columns: 1fr 1fr;
 
     &__label {
@@ -75,8 +75,8 @@
   }
 
   .socials-buttons {
-    @apply flex flex-wrap gap-4 h-fit;
+    @apply flex flex-wrap justify-end gap-4 h-fit;
-
+    min-width: 470px;
     &__button {
       @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
       transition: transform 0.3s ease-in-out;
@@ -90,6 +90,62 @@
       img {
         @apply w-7 h-7 filter-primary;
       }
+
+      &--like {
+        transition: all 0.3s ease-in-out;
+
+        .button-action-text {
+          max-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .likes-count {
+          max-width: 200px;
+          overflow: hidden;
+          /* transition: max-width 0.3s ease-in-out; */
+          white-space: nowrap;
+        }
+
+        &[data-likes-count='0'] {
+          .button-action-text {
+            max-width: 200px;
+          }
+          .likes-count {
+            max-width: 0;
+          }
+        }
+
+        &:hover {
+          .button-action-text {
+            max-width: 200px;
+            transition: max-width 0.3s ease-in-out;
+          }
+          .likes-count {
+            max-width: 0;
+          }
+        }
+
+        &.is-disabled {
+          @apply opacity-100 cursor-not-allowed hover:opacity-80;
+
+          .likes-count {
+            @apply block;
+          }
+          .button-action-text {
+            @apply max-w-0;
+          }
+        }
+
+        &.is-disabled:hover {
+          .button-action-text {
+            @apply max-w-[200px];
+          }
+          .likes-count {
+            @apply max-w-0;
+          }
+        }
+      }
     }
   }
 }