fix(sw-350): changed to data-open

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -27,7 +27,6 @@
   .rooms,
   .vouchers,
   .when,
-  .whenOpen,
   .where {
     background-color: var(--Base-Background-Primary-Normal);
     border-radius: var(--Corner-radius-Medium);
@@ -35,8 +34,7 @@
 
   .rooms,
   .vouchers,
-  .when,
+  .when {
-  .whenOpen {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
@@ -63,7 +61,6 @@
 
   .rooms,
   .when,
-  .whenOpen,
   .where {
     width: 100%;
   }
@@ -74,14 +71,14 @@
   }
 
   .rooms,
-  .when,
+  .when {
-  .whenOpen {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
+
   .when:hover,
   .rooms:hover,
-  .whenOpen,
+  .when[data-open="true"],
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }

components/Forms/BookingWidget/FormContent/index.tsx

@@ -37,7 +37,7 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
+          <div className={styles.when} data-open={isDatePickerOpen}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },