#relationship-graph {
  max-width: 100%;
  max-height: 100%;
}

.graph-node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  pointer-events: none;
  transition: opacity 0.2s;
}

.graph-edge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s, font-weight 0.2s;
}

.graph-edge {
  opacity: 0.5;
  transition: opacity 0.2s, stroke-width 0.2s;
}

.graph-edge.highlighted {
  opacity: 1;
  stroke-width: 3;
}

.graph-edge-label.highlighted {
  opacity: 1;
  font-weight: 500;
}

/* Dim unselected items when a check is active */
.graph-edges.has-highlight .graph-edge:not(.highlighted) {
  opacity: 0.2;
}

.graph-edges.has-highlight .graph-edge-label:not(.highlighted) {
  opacity: 0.3;
}

.graph-nodes.has-highlight .graph-node:not(.highlighted) {
  opacity: 0.75;
}

.graph-node rect {
  transition: stroke-width 0.2s, opacity 0.2s;
}

.graph-node:hover rect {
  stroke-width: 2.5;
}