.stage {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;

  &[data-cursor="grab"] {
    cursor: grab;
  }

  &[data-cursor="grabbing"] {
    cursor: grabbing;
  }

  &[data-cursor="crosshair"] {
    cursor: crosshair;
  }

  &[data-cursor="copy"] {
    cursor: copy;
  }

  &:focus-visible {
    outline: var(--s-1) solid var(--focus);
    outline-offset: calc(-1 * var(--s-1));
  }
}

.zoom-buttons {
  position: absolute;
  top: var(--stage-pad);
  right: var(--stage-pad);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.zoom-button {
  width: var(--s-5);
  height: var(--s-5);
  padding: 0;
}