web/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

.triggerDesktop {
  display: none;
}

.errorContainer {
  display: flex;
  padding: var(--Space-x2);
}

.error {
  display: flex;
  gap: var(--Space-x1);
  color: var(--UI-Text-Error);
}

.pickerContainerMobile {
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 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;
  color: var(--Text-Default);
  cursor: pointer;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px var(--Space-x15) 0;
}

.guestsAndRooms {
  color: var(--Text-Default);
}

.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 {
  color: var(--Base-Text-Accent);
}

.footer button {
  width: 100%;
}

.contentWrapper
  .addRoomMobileContainer
  .addRoomBtn:is(:focus, :focus-visible, :focus-within),
.footer .hideOnMobile .addRoomBtn:is(:focus, :focus-visible, :focus-within),
.roomActionsButton:is(:focus, :focus-visible, :focus-within) {
  outline: -webkit-focus-ring-color auto 1px;
  text-decoration: none;
}

@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;
    padding-bottom: calc(var(--sticky-button-height) + 20px);
  }

  .addRoomMobileContainer button {
    width: 150px;
    margin: 0 auto;
  }

  .addRoomMobileContainer .addRoomMobileDisabledText {
    padding: var(--Spacing-x1) var(--Spacing-x2);
    background-color: var(--Background-Primary);
    margin: 0 var(--Spacing-x2);
    border-radius: var(--Corner-radius-md);
    display: flex;
    gap: var(--Spacing-x1);
  }
}

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

  .triggerDesktop > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

    background-color: var(--Main-Grey-White);
    display: grid;
    border-radius: var(--Corner-radius-lg);
    box-shadow: var(--popup-box-shadow);
    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: auto;
    min-width: 125px;
  }

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