:root {
    --railroad-background-color: hsl(30, 20%, 95%);
    --railroad-background-image:
        linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
    --railroad-path-stroke: black;
    --railroad-rect-stroke: black;
    --railroad-rect-fill: hsl(70, 70%, 90%);
}

.light {
    --grammar-literal-bg: #fafafa;
}

.rust {
    --grammar-literal-bg: #dedede;
}

.light, .rust {
    --grammar-comment-color: lch(from var(--quote-bg) calc(l - 50) 0 0);
    --inline-code-color: var(--grammar-comment-color);
}

.coal, .navy {
    --grammar-literal-bg: #1d1f21;
}

.ayu {
    --grammar-literal-bg: #191f26;
}

.coal, .navy, .ayu {
    --grammar-comment-color: lch(from var(--quote-bg) calc(l + 50) 0 0);
    --inline-code-color: var(--grammar-comment-color);
    --railroad-background-color: hsl(230, 10%, 20%);
    --railroad-background-image:
        linear-gradient(to right, rgba(150, 150, 150, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150, 150, 150, .05) 1px, transparent 1px);
    --railroad-path-stroke: hsl(200, 10%, 60%);
    --railroad-text-fill: hsl(230, 30%, 80%);
    --railroad-rect-stroke: hsl(200, 10%, 50%);
    --railroad-rect-fill: hsl(230, 20%, 20%);
}

.grammar-container {
    font-family: var(--mono-font);
    position: relative;
    background-color: var(--quote-bg);
    border-block-start: .1em solid var(--quote-border);
    border-block-end: .1em solid var(--quote-border);
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0 20px;
}

.grammar-heading {
    margin-top: 1em;
}

.grammar-rule {
    line-height: 1.8;
    margin: .75em 0;
}

.grammar-text {
    font-family: "Open Sans", sans-serif;
}

.grammar-action {
    color: var(--grammar-comment-color);
}

.grammar-code-hidden .grammar-action,
.grammar-code-hidden .grammar-binding {
    display: none;
}

.grammar-action-code {
    display: inline;
    white-space: pre-wrap;
    vertical-align: baseline;
    line-height: inherit;
    color: var(--inline-code-color);
    background: transparent;
    padding: 0;
}

.grammar-comment {
    font-family: "Open Sans", sans-serif;
    color: var(--grammar-comment-color);
}

.grammar-comment code.hljs {
    background: var(--grammar-literal-bg);
}

.grammar-literal {
    font-family: var(--mono-font);
    border-radius: 4px;
    border: solid 1px var(--theme-popup-border);
    font-weight: bold;
    font-size: var(--code-font-size);
    padding: 1px 4px;
    color: var(--inline-code-color);
    background-color: var(--grammar-literal-bg);
}

.grammar-production:target, .railroad-production:target {
    scroll-margin-top: 50vh;
}

.railroad-production {
    position: relative;
}

.grammar-production:target::before, .railroad-production:target::before {
    content: ">";
    position: absolute;
    left: 3px;
    font-size: 2rem;
    font-weight: bolder;
    line-height: 1;
}

.railroad-production:target::before {
    left: -20px;
    top: 8px;
}

.grammar-toggle-code, .grammar-toggle-railroad {
    width: 160px;
    padding: 5px 0;
    margin-inline-end: 6px;
    border-radius: 5px;
    cursor: pointer;
}

.grammar-hidden {
    display: none;
}

svg.railroad {
    background-color: var(--railroad-background-color);
    background-size: 15px 15px;
    background-image: var(--railroad-background-image);
}

svg.railroad rect.railroad_canvas {
    stroke-width: 0;
    fill: none;
}

svg.railroad path {
    stroke-width: 3px;
    stroke: var(--railroad-path-stroke);
    fill: none;
}

svg.railroad .debug {
    stroke-width: 1px;
    stroke: red;
}

svg.railroad text {
    font: 14px monospace;
    text-anchor: middle;
    fill: var(--railroad-text-fill);
}

svg.railroad .nonterminal text {
    font-weight: bold;
}

svg.railroad text.comment {
    font: italic 12px monospace;
}

svg.railroad rect {
    stroke-width: 3px;
    stroke: var(--railroad-rect-stroke);
    fill: var(--railroad-rect-fill);
}

svg.railroad g.labeledbox>rect {
    stroke-width: 1px;
    stroke: grey;
    stroke-dasharray: 5px;
    fill: rgba(90, 90, 150, .1);
}

svg.railroad g.exceptbox > rect {
    fill: rgba(245, 160, 125, .1);
}