feat(SW-718) updates after PR comments

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -15,45 +15,39 @@
   padding: var(--Spacing-x2);
 }
 
-.roomSelectionPanel {
+._basePanel {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
-  transition:
-    opacity 0.3s ease,
-    grid-template-rows 0.5s ease;
   height: 0;
-  gap: var(--Spacing-x2);
-}
-
-.roomSelectionPanel > * {
-  overflow: hidden;
-}
-
-.selectedRoomPanel {
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
   transition:
     opacity 0.3s ease,
     grid-template-rows 0.3s ease;
-  height: 0;
 }
 
-.selectedRoomPanel > * {
+._basePanel > * {
   overflow: hidden;
 }
 
-.roomSelectionPanelContainer[data-selected="true"] .selectedRoomPanel {
+.roomSelectionPanel {
+  composes: _basePanel;
+  gap: var(--Spacing-x2);
+}
+
+.selectedRoomPanel {
+  composes: _basePanel;
+}
+
+.roomSelectionPanelContainer.selected .selectedRoomPanel {
   grid-template-rows: 1fr;
   opacity: 1;
   height: auto;
 }
 
-.roomSelectionPanelContainer[data-selected="true"] .roomSelectionPanel {
+.roomSelectionPanelContainer.selected .roomSelectionPanel {
   display: none;
 }
-.roomSelectionPanelContainer[data-active-panel="true"] .roomSelectionPanel {
+.roomSelectionPanelContainer.active .roomSelectionPanel {
   grid-template-rows: 1fr;
   opacity: 1;
   height: auto;