:root {
    --rect-fill: rgba(var(--mid-blue), 0.1);
}
@media (prefers-color-scheme: dark) {
    :root {
        --rect-fill: rgb(var(--mid-blue), 0.9);
    }
}

svg.railroad-diagram path {
    stroke-width: 2;
    stroke: var(--foreground-body-color);
    fill: none;
}

svg.railroad-diagram text {
    font-family: var(--font-family-monospace);
    text-anchor: middle;
    white-space: pre;
    fill: var(--foreground-body-color);
}

svg.railroad-diagram text.diagram-text {
    font-size: 11px;
}

svg.railroad-diagram text.diagram-arrow {
    font-size: 16px;
}

svg.railroad-diagram text.label {
    text-anchor: start;
}

svg.railroad-diagram text.comment {
    font: italic 12px var(--font-family-monospace);
}

svg.railroad-diagram g.non-terminal text {
    /*font-style: italic;*/
}

svg.railroad-diagram rect {
    stroke-width: 2;
    stroke: var(--foreground-body-color);
    fill: var(--rect-fill);
}

svg.railroad-diagram rect.group-box {
    stroke: gray;
    stroke-dasharray: 10 5;
    fill: none;
}

svg.railroad-diagram path.diagram-text {
    stroke-width: 2;
    stroke: var(--foreground-body-color);
    fill: var(--background-body-color);
    cursor: help;
}

svg.railroad-diagram g.diagram-text:hover path.diagram-text {
    fill: var(--rect-fill);
}