/* Canvas TapNow theme - canvas plane, grid, graph edges, marquee, knife stroke. */

/* Canvas plane, graph edges, and selection */
.canvas-page .canvas-stage-wrap {
  background-color: #000000;
}

.canvas-page .canvas-stage-wrap[data-background="dots"] {
  background-image: none;
}

.canvas-page .canvas-grid-layer circle {
  fill: rgba(255, 255, 255, 0.3);
}

.canvas-page .canvas-stage-wrap[data-background="lines"] {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.canvas-page .canvas-edge-line,
.canvas-page .canvas-edge-path,
.canvas-page .canvas-edge-preview {
  stroke: rgba(255, 255, 255, 0.38);
  transition: stroke var(--canvas-motion-fast), stroke-width var(--canvas-motion-fast);
}

.canvas-page .canvas-edge-line.is-hovered,
.canvas-page .canvas-edge-path.is-hovered {
  stroke: rgba(255, 255, 255, 0.78);
}

.canvas-page .canvas-marquee {
  border-color: rgba(255, 255, 255, 0.38);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

.canvas-page .canvas-knife-stroke polyline {
  stroke: rgba(255, 255, 255, 0.86);
  filter: drop-shadow(0 0 6px rgba(242, 125, 125, 0.46));
}