diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css index 3314ff766..c45e9b929 100644 --- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css +++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css @@ -13,6 +13,7 @@ grid-template-rows: var(--header-height) 0fr; column-gap: var(--Spacing-x-one-and-half); + transform-origin: top; } .accordion:last-child { @@ -90,12 +91,18 @@ .content { overflow: hidden; grid-area: content; + opacity: 0; border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); transform-origin: top; + transition: 0.2s ease-out; } .accordion[data-open="true"] .content { - overflow: visible; /* DoB dropdowns needs to overflow in enter details step */ + opacity: 1; +} + +.content:has([data-open="true"]) { + overflow: visible; } @media screen and (min-width: 768px) {