.graphSvg {
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}

.node {
  transition:
    opacity 0.2s ease-in-out,
    stroke-width 0.1s ease-out;
  cursor: pointer;

  &.dimmed {
    opacity: 0.15;
  }

  &.selected {
    stroke: white !important;
    stroke-width: 2px !important;
    stroke-opacity: 1;
  }
}

.link {
  fill: none;
  stroke-opacity: 0;
  transition:
    stroke 0.2s ease-in-out,
    stroke-opacity 0.2s ease-in-out,
    stroke-width 0.1s ease-out;

  &.incoming,
  &.outgoing {
    stroke-opacity: 0.7;
  }

  &.incoming {
    stroke: var(--accent-blue);
  }
  &.outgoing {
    stroke: var(--accent-green);
  }
}

.labels {
  pointer-events: none;
}

.nodeLabel {
  text-anchor: middle;
  dominant-baseline: middle;
  fill: white;
  font-weight: 700;
  pointer-events: none;
  filter: url(#text-glow);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;

  &.visible {
    opacity: 1;
  }
}