.rr-diagram {
    margin: rem(1.5) 0;
    overflow: auto;

    .line {
        fill: none;
        stroke: var(--sub);
    }

    .bold-line {
        stroke: var(--important);
        shape-rendering: crispEdges;
        stroke-width: 2;
    }

    .thin-line {
        stroke: var(--important);
        shape-rendering: crispEdges;
    }

    .filled {
        fill: var(--sub);
        stroke: none;
    }

    text.terminal,
    text.nonterminal,
    text.regexp {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        fill: $black;
    }

    text.terminal {
        font-weight: bold;
    }

    rect,
    circle,
    polygon {
        fill: var(--sub);
        stroke: var(--sub);
    }

    rect.terminal {
        fill: #ab96e0;
        stroke: var(--sub);
    }

    rect.nonterminal {
        fill: scale-color($purple-20, $saturation: -50%);
        stroke: var(--sub);
    }

    rect.text {
        fill: none;
        stroke: none;
    }

    polygon.regexp {
        fill: scale-color($purple-10, $saturation: -50%);
        stroke: var(--sub);
    }
}