fix: handle submit from summary bottom sheet

components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css

@@ -13,8 +13,6 @@
   grid-template-columns: 1fr auto;
   padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
     var(--Spacing-x3);
-  justify-content: space-between;
-  width: auto;
   align-items: flex-start;
   transition: 0.5s ease-in-out;
 }
@@ -24,11 +22,9 @@
   border: none;
   background: none;
   text-align: start;
-  opacity: 1;
-  transition:
-    opacity 0.5s ease-in-out,
-    padding 0.5s ease-in-out;
+  transition: padding 0.5s ease-in-out;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .wrapper[data-open="true"] {
@@ -36,15 +32,39 @@
 }
 
 .wrapper[data-open="true"] .bottomSheet {
-  grid-template-columns: 0fr 1fr;
+  grid-template-columns: 0fr auto;
 }
 
 .wrapper[data-open="true"] .priceDetailsButton {
+  animation: fadeOut 0.3s ease-out;
   opacity: 0;
   padding: 0;
 }
 
+.wrapper[data-open="false"] .priceDetailsButton {
+  animation: fadeIn 0.8s ease-in;
+  opacity: 1;
+}
+
 .content,
 .priceDetailsButton {
   overflow: hidden;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}