.canvasContainer {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.canvasPane {
  position: relative;
  overflow: scroll;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  background: var(--gray-8);
}

.canvas {
  --canvas-scale: 1;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  min-width: fit-content;
  min-height: fit-content;
  padding: 80vh 80vw;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  background: var(--gray-4);
  box-shadow: var(--shadow-3);

  &.visible {
    opacity: 1;
  }
}

.modifierKeyPressed .canvas {
  cursor: zoom-in;
  user-select: none;
}

.isPanning .canvas {
  user-select: none;
}

.modifierKeyPressed .canvas > *,
.isPanning .canvas > * {
  user-select: none;
  pointer-events: none;
}
