web/components/GuestsRoomsPicker/guests-rooms-picker.module.css

.triggerDesktop {
  display: none;
}

.pickerContainerMobile {
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
  border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 20px;
  transition: top 300ms ease;
  z-index: 100;
}
.contentWrapper {
  display: grid;
  grid-template-areas:
    "header"
    "content";
  grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
}

.pickerContainerDesktop {
  display: none;
}

.roomContainer {
  display: grid;
  gap: var(--Spacing-x2);
}
.roomDetailsContainer {
  display: grid;
  gap: var(--Spacing-x2);
  padding-bottom: var(--Spacing-x1);
}
.roomHeading {
  margin-bottom: var(--Spacing-x1);
}
.btn {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px var(--Spacing-x-one-and-half) 0;
}

.footer {
  display: flex;
  flex-direction: row;
  gap: var(--Spacing-x1);
}

.roomContainer {
  padding: var(--Spacing-x2);
}
.roomContainer:last-of-type {
  padding-bottom: calc(var(--sticky-button-height) + 20px);
}

.roomActionsButton {
  margin-left: auto;
  color: var(--Base-Text-Accent);
}

.footer button {
  width: 100%;
}

@media screen and (max-width: 1366px) {
  .contentContainer {
    grid-area: content;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }

  .header {
    display: grid;
    grid-area: header;
    padding: var(--Spacing-x3) var(--Spacing-x2) 0;
  }

  .close {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-self: flex-end;
    padding: 0;
  }

  .footer {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 7.5%,
      #ffffff 82.5%
    );
    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x7);
    position: sticky;
    bottom: 0;
    width: 100%;
  }

  .footer .hideOnMobile {
    display: none;
  }

  .addRoomMobileContainer {
    display: grid;
    width: 150px;
    margin: 0 auto;
    padding-bottom: calc(var(--sticky-button-height) + 20px);
  }
}

@media screen and (min-width: 1367px) {
  .container {
    height: 24px;
  }
  .pickerContainerMobile {
    display: none;
  }
  .contentWrapper {
    grid-template-rows: auto;
  }

  .roomContainer {
    padding: var(--Spacing-x2) 0 0 0;
  }
  .roomContainer:first-of-type {
    padding-top: 0;
  }

  .roomContainer:last-of-type {
    padding-bottom: 0;
  }

  .contentContainer {
    overflow-y: visible;
  }

  .triggerMobile {
    display: none;
  }

  .triggerDesktop {
    display: block;
  }

  .pickerContainerDesktop {
    --header-height: 72px;
    --sticky-button-height: 140px;

    background-color: var(--Main-Grey-White);
    display: grid;
    border-radius: var(--Corner-radius-Large);
    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
    max-width: calc(100vw - 20px);
    padding: var(--Spacing-x2) var(--Spacing-x3);
    width: 360px;
  }

  .pickerContainerDesktop:focus-visible {
    outline: none;
  }

  .header {
    display: none;
  }

  .footer {
    grid-template-columns: auto auto;
    padding-top: var(--Spacing-x2);
  }

  .footer button {
    margin-left: auto;
    width: 125px;
  }

  .footer .hideOnDesktop,
  .addRoomMobileContainer {
    display: none;
  }
}