.canvas-area {
  position: absolute;
  z-index: var(--arhix-document-layer-canvas);
  inset: var(--arhix-document-inset-zero);
  overflow: hidden;
  background: var(--arhix-document-canvas-bg);
}

#grid-canvas,
#canvas {
  position: absolute;
  inset: var(--arhix-document-inset-zero);
  width: 100%;
  height: 100%;
  display: block;
}

#grid-canvas {
  pointer-events: none;
}

.canvas-origin-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

#canvas {
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#canvas [data-text-content="true"],
#canvas [data-leader-text="true"] {
  white-space: pre;
}

#underlay-layer,
#draw-layer,
#ghost-layer {
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform;
}

#underlay-layer {
  pointer-events: none;
}

#underlay-layer > :not(.ui-local-image):not([data-local-image-move-guide]):not([data-counter-scale]) {
  opacity: 0.28;
}

.canvas-area._local-image-canvas #underlay-layer {
  pointer-events: auto;
}

.ui-local-image._underlay {
  opacity: 0.28;
}

.ui-local-image__frame {
  fill: transparent;
  stroke: var(--arhix-document-selection);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ui-local-image__frame-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
}

.ui-local-image._selected .ui-local-image__frame {
  stroke-width: 1.4;
}

#canvas[data-ui-point-edit-mode="add"],
#canvas[data-ui-point-edit-mode="remove"] {
  cursor: crosshair;
}