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

.wrapper {
  display: grid;
  grid-template-rows: 0fr 7.5em;

  transition: 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 auto;
  padding: var(--Spacing-x2) 0 var(--Spacing-x5);
  align-items: flex-start;
  transition: 0.5s ease-in-out;
  max-width: var(--max-width-page);
  width: 100%;
  margin: 0 auto;
}

.priceDetailsButton {
  display: block;
  border: none;
  background: none;
  text-align: start;
  transition: padding 0.5s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

.wrapper[data-open="true"] {
  grid-template-rows: 1fr 7.5em;
}

.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;
}

.priceDetailsButton {
  overflow: hidden;
}

.content {
  max-height: 50dvh;
  overflow-y: auto;
}

@media screen and (min-width: 768px) {
  .bottomSheet {
    padding: var(--Spacing-x2) 0 var(--Spacing-x7);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}