:root {
  --input: #50de89;
  --output: #ff5b64;
  --select: #ffd800;
}

path.input {
  stroke: var(--input);
  stroke-width: 16px;
}

path.output {
  stroke: var(--output);
  stroke-width: 16px;
}

g.turboshaft-block rect {
  stroke-dasharray: 20;
  stroke-width: 7;
}

g.turboshaft-block:hover rect {
  stroke-dasharray: 0;
  stroke-width: 10;
}

g.turboshaft-block.selected rect {
  stroke-dasharray: 0;
  stroke-width: 15;
  stroke: var(--select);
}

g.block rect {
  fill: #eef4fd;
  stroke: #4285f4;
}

g.merge rect {
  fill: #ecfcf0;
  stroke: #2bde5a;
}

g.loop rect {
  fill: #fdf0ee;
  stroke: #e94235;
}

.block-label tspan {
  font-weight: bold;
}

.block .block-label tspan {
  fill: #4285f4;
}

.merge .block-label tspan {
  fill: #34a853;
}

.loop .block-label tspan {
  fill: #ea4335;
}

.inline-node-label tspan {
  fill: #344344;
}

.inline-node-label:hover tspan {
  fill: #5a6c6c;
}

.inline-node-label.selected tspan {
  fill: var(--select);
}

.inline-node-custom-data tspan, .block-collapsed-label tspan {
  fill: #c34ce8;
}

g.turboshaft-node.input .inline-node-label tspan  {
  fill: var(--input);
}

g.turboshaft-node.output .inline-node-label tspan {
  fill: var(--output);
}

#custom-data-select {
  height: 1.5em;
  margin: 0 3px;
}