@layer modules {
/* transitions.css — Graph edge and connection line styles */

.edge-group {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.edge-path {
  fill: none;
  stroke-width: 2;
  transition: stroke 0.15s ease;
}

.edge-path--default {
  stroke: var(--color-ink-muted);
  stroke-dasharray: 6 3;
}

.edge-path--conditional {
  stroke: var(--color-link);
}

.edge-label {
  font-size: var(--text-xs);
}

.edge-label rect {
  fill: var(--color-canvas);
  stroke: var(--color-border);
}

.edge-label text {
  fill: var(--color-ink-subtle);
}

.edge-delete-btn {
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
}

.edge-delete-btn circle {
  fill: var(--color-negative);
}

.edge-delete-btn text {
  fill: oklch(1 0 0);
  font-size: 0.75rem;
}

.edge-group:hover .edge-delete-btn {
  opacity: 1;
}

/* SVG arrow markers */
.edge-marker {
  fill: var(--color-ink-muted);
}

.edge-marker--conditional {
  fill: var(--color-link);
}

/* Temp connection line during drag */
.temp-connection {
  stroke: var(--color-link);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  fill: none;
  pointer-events: none;
}

/* Non-interactive flowchart SVG (preview mode) */
.flowchart-svg--non-interactive {
  pointer-events: none;
}

/* Flow path illustration dark mode */
[data-theme="dark"] .flow-path,
[data-theme="dark"] .flow-path-reverse {
  stroke: oklch(0.35 0.01 75);
}
}