.canvas-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.canvas-view .canvas-viewport {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

.canvas-view .canvas-viewport[data-dragging='true'] {
  cursor: grabbing;
}

.canvas-view .canvas-spinner {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color-base);
}

.canvas-view .canvas-spinner[data-visible='true'] {
  display: flex;
}

.canvas-view .canvas-tile-surface {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.canvas-view .canvas-tile-compositor {
  transform-origin: 0px 0px;
  will-change: transform;
}

.canvas-view .canvas-viewport[data-cropping='true'] {
  cursor: crosshair;
}

.canvas-view .canvas-crop, .canvas-view .canvas-region {
  position: absolute;
  box-sizing: border-box;
  border: var(--border-width-base) solid var(--color-blue);
  outline: var(--border-width-base) solid var(--color-blue);
  pointer-events: none;
}

.canvas-view .canvas-crop {
  z-index: 5;
}

.canvas-view .canvas-region {
  z-index: 4;
}

.canvas-view .canvas-grid {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.canvas-view .canvas-readout {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.canvas-view .canvas-grid-label, .canvas-view .canvas-readout {
  position: absolute;
  padding-inline: var(--spacing-2);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-subtle);
  background-color: var(--background-color-backdrop-light);
  white-space: nowrap;
}

.canvas-view .canvas-region-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--background-color-backdrop-dark-fixed);
  opacity: var(--opacity-medium);
  pointer-events: none;
}

.canvas-view .canvas-crop-handle {
  position: absolute;
  width: var(--spacing-8);
  height: var(--spacing-8);
  box-sizing: border-box;
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--color-blue);
  transform: translate(-50%, -50%);
}

.canvas-view .canvas-crop-handle[data-corner='nw'] {
  left: 0px;
  top: 0px;
}

.canvas-view .canvas-crop-handle[data-corner='ne'] {
  left: 100%;
  top: 0px;
}

.canvas-view .canvas-crop-handle[data-corner='sw'] {
  left: 0px;
  top: 100%;
}

.canvas-view .canvas-crop-handle[data-corner='se'] {
  left: 100%;
  top: 100%;
}

.canvas-view .canvas-viewport[data-crop-hover='move'] {
  cursor: move;
}

.canvas-view .canvas-viewport[data-crop-hover='nw'], .canvas-view .canvas-viewport[data-crop-hover='se'] {
  cursor: nwse-resize;
}

.canvas-view .canvas-viewport[data-crop-hover='ne'], .canvas-view .canvas-viewport[data-crop-hover='sw'] {
  cursor: nesw-resize;
}

.canvas-view .canvas-crop[hidden], .canvas-view .canvas-region[hidden], .canvas-view .canvas-region-dim[hidden], .canvas-view .canvas-grid[hidden], .canvas-view .canvas-readout[hidden] {
  display: none;
}

.canvas-view .canvas-tile-image[data-loaded='false'] {
  opacity: 0;
}

.canvas-view .canvas-tile-image[data-loaded='true'] {
  opacity: 1;
}