/* The state diagram: states, transitions and their labels. Colors for a running machine are here too. */

/* ---------- States ---------- */

.state {
  cursor: grab;
}

.state .body {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.state .inner {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.nm {
  font: 400 17px var(--font);
  fill: var(--ink);
  pointer-events: none;
}

.nm .sub {
  font-size: 11px;
}

.state .selring {
  fill: none;
  stroke: var(--sel);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.state.cur .body {
  fill: var(--run-soft);
  stroke: var(--run);
  stroke-width: 2.2;
}

.state.cur .inner {
  stroke: var(--run);
}

.state.ok .body {
  fill: var(--ok-soft);
  stroke: var(--ok);
  stroke-width: 2.2;
}

.state.ok .inner {
  stroke: var(--ok);
}

.state.bad .body {
  fill: var(--bad-soft);
  stroke: var(--bad);
  stroke-width: 2.2;
}

.state.bad .inner {
  stroke: var(--bad);
}

.state.target .body,
.state.pend .body {
  stroke: var(--sel);
  stroke-width: 2.2;
}

/* ---------- Transitions ---------- */

.edge {
  color: var(--ink);
}

.edge .hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
}

.edge .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.edge .tip {
  fill: currentColor;
}

.edge.sel {
  color: var(--sel);
}

.edge.sel .line {
  stroke-width: 2;
}

.edge.act {
  color: var(--run);
}

.edge.act .line {
  stroke-width: 2.2;
}

/* ---------- Transition labels ---------- */

.elabel {
  color: var(--ink);
  cursor: pointer;
}

.elabel.sel {
  color: var(--sel);
}

.elabel.act {
  color: var(--run);
}

.elabel rect {
  fill: transparent;
}

.elabel text {
  font: 400 12.5px var(--font);
  fill: currentColor;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.elabel .on {
  font-weight: 700;
  fill: var(--run);
}

/* ---------- Initial arrow and link preview ---------- */

.init path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}

.init polygon {
  fill: var(--ink);
}

.init text {
  font: 400 13px var(--font);
  fill: var(--muted);
}

.ghost {
  fill: none;
  stroke: var(--sel);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  pointer-events: none;
}