Genarrative/packages/image-canvas-react/src/styles.css

.genarrative-image-canvas {
  --genarrative-image-canvas-accent: var(--image-canvas-brand-accent, #c7653d);
  --genarrative-image-canvas-selection-fill: rgba(199, 101, 61, 0.12);
  --genarrative-image-canvas-selection-border: rgba(199, 101, 61, 0.78);
}

.genarrative-image-canvas__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}

.genarrative-image-canvas__viewport--panning {
  cursor: grabbing;
}

.genarrative-image-canvas__viewport--tool-hand {
  cursor: grab;
}

.genarrative-image-canvas__world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.genarrative-image-canvas__layer {
  position: absolute;
  display: block;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 0.15rem;
  background: transparent;
  padding: 0;
  cursor: move;
}

.genarrative-image-canvas__layer--locked {
  cursor: not-allowed;
}

.genarrative-image-canvas__selection-overlay {
  position: absolute;
  z-index: 100000;
  border: 1px solid var(--genarrative-image-canvas-selection-border);
  background: var(--genarrative-image-canvas-selection-fill);
  pointer-events: none;
}

.genarrative-image-canvas__minimap {
  touch-action: none;
}

.genarrative-image-canvas__minimap-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.genarrative-image-canvas__minimap-layer,
.genarrative-image-canvas__minimap-viewport {
  position: absolute;
}

.genarrative-image-canvas__portal {
  position: relative;
  z-index: 70;
}

.genarrative-image-canvas__chrome-button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  border: 1px solid
    var(
      --image-canvas-brand-border-soft,
      var(--platform-icon-border, rgba(226, 203, 184, 0.82))
    );
  border-radius: 0.45rem;
  background: var(--platform-icon-fill, #ffffff);
  padding: 0;
  color: var(--platform-icon-text, #334155);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.genarrative-image-canvas__chrome-button--with-label {
  width: auto;
  min-width: 2.25rem;
  padding-inline: 0.65rem;
}

.genarrative-image-canvas__chrome-button-icon,
.genarrative-image-canvas__chrome-button-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.genarrative-image-canvas__chrome-button-label {
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.genarrative-image-canvas__chrome-button:not(:disabled):hover,
.genarrative-image-canvas__chrome-button[aria-pressed='true'] {
  transform: translateY(-1px);
  border-color: var(
    --image-canvas-brand-border-strong,
    var(--platform-nav-active-border, rgba(199, 101, 61, 0.64))
  );
  background: var(
    --image-canvas-brand-soft,
    var(--platform-nav-active-fill, rgba(234, 204, 179, 0.28))
  );
  color: var(
    --image-canvas-brand-accent-strong,
    var(--platform-text-strong, #6f2f21)
  );
}

.genarrative-image-canvas__chrome-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px
    var(--image-canvas-brand-focus-ring, rgba(204, 117, 76, 0.18));
}

.genarrative-image-canvas__chrome-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.genarrative-image-canvas__toolbar {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.genarrative-image-canvas__toolbar--floating {
  border: 1px solid
    var(
      --image-canvas-brand-border-soft,
      var(--platform-surface-border, rgba(226, 203, 184, 0.82))
    );
  border-radius: 0.5rem;
  background: var(--platform-panel-fill, #ffffff);
  padding: 0.35rem;
  box-shadow: var(
    --image-canvas-toolbar-shadow,
    0 18px 38px rgba(15, 23, 42, 0.16)
  );
}

.genarrative-image-canvas__toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.genarrative-image-canvas__toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 0.5rem;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 999px;
  background: var(
    --image-canvas-brand-border-soft,
    var(--platform-line-soft, rgba(226, 203, 184, 0.82))
  );
}