/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

.inRoom {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  position: sticky;
  flex-shrink: 0;
  inset-block-start: 0;
  z-index: var(--call-view-header-footer-layer);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

.header.hidden {
  display: none;
}

.header.overlay {
  /* Note that the header is still position: sticky in this case so that certain
    tiles can move down out of the way of the header when visible. */
  opacity: 1;
  transition: opacity 0.15s;
}

.header.overlay.hidden {
  display: flex;
  opacity: 0;
  pointer-events: none;
  /* Switch to position: absolute so the header takes up no space in the layout
    when hidden. */
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.header.overlay:has(:focus-visible) {
  opacity: 1;
  pointer-events: initial;
}

.header.filler {
  block-size: var(--cpd-space-6x);
  background: none;
}

@media (max-width: 320px) {
  .invite {
    display: none;
  }
}

.fixedGrid {
  position: absolute;
  inline-size: 100%;
  align-self: center;
}

.scrollingGrid {
  position: relative;
  flex-grow: 1;
  inline-size: 100%;
  align-self: center;
}

.fixedGrid,
.scrollingGrid {
  /* Disable pointer events so the overlay doesn't block interaction with
  elements behind it */
  pointer-events: none;
}

.fixedGrid > :not(:first-child),
.scrollingGrid > :not(:first-child) {
  pointer-events: initial;
}

.tile {
  position: absolute;
  inset-block-start: 0;
}

.tile.maximised {
  position: relative;
  flex-grow: 1;
}