/* State-machine diagram colours: the one place to change any colour on the
   diagrams. The diagrams always sit on a white background (custom.css), so only
   the table rows need a dark-mode colour. */
:root {
  --sm-node-text: #1f2328;
  --sm-init-fill: #eceef1;
  --sm-init-stroke: #6b7280;
  --sm-idle-fill: #e3ecf8;
  --sm-idle-stroke: #2f5f9e;
  --sm-active-fill: #dff3e6;
  --sm-active-stroke: #237a4b;
  --sm-fault-fill: #fbe3de;
  --sm-fault-stroke: #b4361e;

  --sm-hover-accent: #d9480f;
  --sm-hover-label-bg: #ffd8a8;
  --sm-hover-label-text: #7a2e00;
  --sm-hover-row-bg: #fff1e0;
}

.dark {
  --sm-hover-row-bg: #4a2a12;
}

/* Node categories, applied with `class <State> <category>` lines in the Mermaid
   source (sw/state_machine.md). Mermaid's own node style is scoped by the SVG's
   id, which outranks these selectors, hence !important. */
.mermaid g.node.init > rect {
  fill: var(--sm-init-fill) !important;
  stroke: var(--sm-init-stroke) !important;
}

.mermaid g.node.idle > rect {
  fill: var(--sm-idle-fill) !important;
  stroke: var(--sm-idle-stroke) !important;
}

.mermaid g.node.active > rect {
  fill: var(--sm-active-fill) !important;
  stroke: var(--sm-active-stroke) !important;
}

.mermaid g.node.fault > rect {
  fill: var(--sm-fault-fill) !important;
  stroke: var(--sm-fault-stroke) !important;
}

/* States the machine only passes through for one tick. */
.mermaid g.node.transient > rect {
  stroke-dasharray: 4 3;
}

.mermaid g.node:is(.init, .idle, .active, .fault) .nodeLabel {
  color: var(--sm-node-text) !important;
}

/* Transition hover links, see sm-hover.js. */
.sm-hover-target,
.mermaid g.edgeLabels > g.edgeLabel {
  cursor: pointer;
}

.mermaid path.sm-hover-active {
  stroke: var(--sm-hover-accent) !important;
  stroke-width: 3px !important;
}

.mermaid g.edgeLabel.sm-hover-active .labelBkg,
.mermaid g.edgeLabel.sm-hover-active span.edgeLabel {
  background-color: var(--sm-hover-label-bg) !important;
  color: var(--sm-hover-label-text) !important;
}

/* A glow rather than a fill change, so the hovered node keeps its category colour. */
.mermaid g.node.sm-hover-active {
  filter: drop-shadow(0 0 3px var(--sm-hover-accent))
    drop-shadow(0 0 2px var(--sm-hover-accent));
}

tr.sm-hover-active > td {
  background-color: var(--sm-hover-row-bg);
}