/* SPDX-License-Identifier: Apache-2.0 */
#grid {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bkg-color);
}

.cell {
  position: relative;
  overflow: hidden;
  /* Prevents the Components from growing the Cells over the sizes defined by the Grid. */
  min-width: 0;
  min-height: 0;
}

::slotted(*) {
  display: block;
  width: 100%;
  height: 100%;
}

/* The splitters look like the gutters used to resize the panels (see #gutter of the lr-panel),
   but they go along the boundary they can move, with a 2rem gap at both ends,
   and are centered on it. The Component sets --start and --end: the insets of the two ends
   of the splitter from the edges of the Grid, as a splitter only goes along the Cells
   that share its boundary. */
.splitter {
  position: absolute;
  z-index: 100;
  background: var(--bkg-color);
  border: var(--app-standard-border);
  border-radius: 1rem;
  touch-action: none;
}

.splitter-vertical {
  top: calc(var(--start) + 2rem);
  bottom: calc(var(--end) + 2rem);
  width: 6px;
  /* Centers the splitter on the boundary, whatever its borders add to its width. */
  transform: translateX(-50%);
  cursor: col-resize;
}

.splitter-horizontal {
  left: calc(var(--start) + 2rem);
  right: calc(var(--end) + 2rem);
  height: 6px;
  transform: translateY(-50%);
  cursor: row-resize;
}

/* The 2rem at both ends that the splitter itself does not cover are filled with a thin line,
   so that the boundary between the cells stays visible over its whole length. */
.splitter::before,
.splitter::after {
  content: '';
  position: absolute;
  background: var(--app-color-grey);
}

.splitter-vertical::before,
.splitter-vertical::after {
  left: 50%;
  width: 1px;
  height: 2rem;
  transform: translateX(-50%);
}

/* The lines are placed against the padding box of the splitter, which is inset by its border:
   they are made 1px longer, so that they reach the end of the boundary. */
.splitter-vertical::before {
  top: calc(-2rem - 1px);
  height: calc(2rem + 1px);
}

.splitter-vertical::after {
  bottom: calc(-2rem - 1px);
  height: calc(2rem + 1px);
}

.splitter-horizontal::before,
.splitter-horizontal::after {
  top: 50%;
  height: 1px;
  width: 2rem;
  transform: translateY(-50%);
}

.splitter-horizontal::before {
  left: calc(-2rem - 1px);
  width: calc(2rem + 1px);
}

.splitter-horizontal::after {
  right: calc(-2rem - 1px);
  width: calc(2rem + 1px);
}