Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css

@@ -0,0 +1,94 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: 0fr auto;
+  transition: all 0.5s ease-in-out;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  background: var(--Base-Surface-Primary-light-Normal);
+  align-content: end;
+}
+
+.bottomSheet {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: var(--Space-x2) var(--Space-x3) var(--Space-x5);
+  align-items: flex-start;
+  transition: all 0.5s ease-in-out;
+  width: 100vw;
+}
+
+.priceDetailsButton {
+  border-width: 0;
+  background-color: transparent;
+  text-align: start;
+  cursor: pointer;
+  padding: 0;
+  display: grid;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+.wrapper[data-open="true"] {
+  grid-template-rows: 1fr 7.5em;
+  position: relative;
+  z-index: var(--default-modal-z-index);
+}
+
+.wrapper[data-open="true"] .bottomSheet {
+  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 {
+  max-height: 50dvh;
+  overflow-y: auto;
+}
+
+.summaryAccordion {
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+  border-style: solid;
+  border-width: 1px;
+  border-bottom: none;
+  z-index: 10;
+}
+
+.priceLabel {
+  color: var(--Text-Default);
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.seeDetails {
+  margin-top: var(--Space-x15);
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+}
+
+@media screen and (min-width: 1367px) {
+  .bottomSheet {
+    padding: var(--Space-x2) 0 var(--Space-x7);
+  }
+}