element-call/component/ElementCall.module.css

/*
Copyright 2026 Element Creations Ltd.

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

/* The container a host mounts us into. It fills whatever space the host gives
it, and nothing we draw may leave it.

That takes two separate things, which are easy to mistake for one. `isolation`
gives us a stacking context, so nothing inside can be layered above the host's
own interface. Containment makes us the containing block for `position: fixed`
descendants, and clips what we paint to our own box: without it, the modal
scrim and dialog — which are positioned `fixed` and centred, since in the app
they are meant to cover the page — resolve against the viewport and appear in
the middle of the host's window rather than in the middle of the call.

The clipping cuts both ways: a menu near the edge of a small container is
trimmed rather than overflowing into the host. That is the trade being a
component rather than a page makes. */
.root {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  isolation: isolate;
  contain: layout paint;
  position: relative;
  background-color: var(--cpd-color-bg-canvas-default);
  color: var(--cpd-color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* floating-ui's portal node, which `PortalRoot` puts here to hold the call
along with the tooltips Compound floats over it. It fills the container, and
lays out its children as the container would. */
.root > [data-floating-ui-portal] {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  position: relative;
}

/* The call itself, in the wrapper `PortalRoot` gives it. It is a stacking
context of its own, as the standalone page's `#root` is, so that the layers
the call view uses for its header, footer and overlays stay below the modals
and toasts, which are portalled into the root and carry no layer of their own,
and below the tooltips. */
.content {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  position: relative;
  isolation: isolate;
}

/* The tooltips sit in portal nodes of their own, nested in ours. Raised, so
that a tooltip opened inside a modal shows above it: the modal is portalled
straight into the root and so comes later in the document than our node. */
.root > [data-floating-ui-portal] > [data-floating-ui-portal] {
  position: relative;
  z-index: 1;
}