.floorGrid-room,
.floorGrid-configureRoom {
  position: relative;
  display: grid;
  place-items: center;

  &__header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: .25rem;
    bottom: calc(100% + .125rem);
    left: 0;
    right: 0;
  }
  &__field {
    position: relative;
    aspect-ratio: 1;
    border-radius: 20%;
  }
  &::before {
    position: absolute;
    content: '';
    left: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
    right: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
    background-color: var(--theme-popup-color);
    border: 1px solid var(--theme-popup-divider);
    border-radius: 1rem;
  }
}

.floorGrid-room {
  &.hovered:hover {
    z-index: 10;
  }
  &__header {
    align-items: center;
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);

    & > span {
      color: var(--theme-caption-color);
      cursor: default;
    }
  }
  &__field {
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    transition-property: max-width, max-height;
    transition-duration: .15s;
    transition-timing-function: ease-in-out;

    &.hovered:hover {
      background-color: transparent;

      & > div { opacity: .35; }
    }
  }

  &::before {
    bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);

    &.hovered { background-color: var(--theme-popup-hover); }
  }
  &:not(.preview)::before { top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6); }
  &.preview::before {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
    bottom: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
    left: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
    right: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
    border-radius: .375rem;

    .floorGrid-room__field { border-radius: .25rem; }
  }
  &:not(.disabled, .myOffice) {
    &:hover .floorGrid-room__field { background-color: var(--theme-button-default); }
    .floorGrid-room__field:not(.person) {
      cursor: pointer;

      &:hover {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  &.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
}

.floorGrid-configureRoom {
  &__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);

    & > .antiEditBox input { font-size: .8125rem; }
  }
  &__field {
    width: 90%;
    background-color: var(--theme-button-default);
    cursor: default;

    &.null { pointer-events: none; }
  }

  &::before {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6);
    bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
    box-shadow: var(--huly-floor-roomShadow, --theme-popup-shadow);
  }

  &.dragged {
    position: absolute;
    width: var(--huly-floor-roomWidth);
    height: var(--huly-floor-roomHeight);
    opacity: .85;
    z-index: 1;
  }
  &.placed {
    $room-bg-color: var(--theme-popup-color);
    $room-stroke-color: var(--theme-button-default);
    background-image: linear-gradient(
      135deg,
      $room-stroke-color 10%,
      $room-bg-color 10%,
      $room-bg-color 50%,
      $room-stroke-color 50%,
      $room-stroke-color 60%,
      $room-bg-color 60%,
      $room-bg-color 100%
    );
    background-size: 7px 7px;

    .floorGrid-room__header,
    .floorGrid-room__field { visibility: hidden; }
  }
}

// Room
@media only screen and (max-width: 1024px) {
  .room-container + .bar > .bar__left-panel button span { display: none; }
}
@media only screen and (max-width: 700px) {
  .room-container + .bar > .bar__left-panel { position: initial; }
}

// RoomPopup
.room-popup {
  .room-btns {
    button.secondary,
    .hulySplitButton-main {
      flex-grow: 1;
    }
    .hulySplitButton-container {
      flex-grow: 2;
    }
    &.no-video .hulySplitButton-container {
      flex-grow: 4;
    }
  }
}