:root {
    --code-highlight-green: rgba(72, 187, 120, 0.422);
    --code-highlight-yellow: rgba(255, 214, 102, 0.398);
    --code-highlight-red: rgba(255, 138, 138, 0.418);
    --code-highlight-blue: rgba(129, 212, 250, 0.32);
}

html.jyu-dark {
    --code-highlight-green: rgba(13, 81, 41, 0.543);
    --code-highlight-yellow: rgba(180, 135, 11, 0.503);
    --code-highlight-red: rgba(154, 33, 33, 0.497);
    --code-highlight-blue: rgba(129, 212, 250, 0.65);
}

.hl-line {
    display: inline-block;
    width: 100%;
}

/* box-shadow bleeds the highlight colour into <pre> padding (edge-to-edge)
   without affecting layout or scroll width. */
.hl-green  {
    background-color: var(--code-highlight-green);
    box-shadow: 1em 0 0 var(--code-highlight-green), -1em 0 0 var(--code-highlight-green);
}
.hl-yellow {
    background-color: var(--code-highlight-yellow);
    box-shadow: 1em 0 0 var(--code-highlight-yellow), -1em 0 0 var(--code-highlight-yellow);
}
.hl-red {
    background-color: var(--code-highlight-red);
    box-shadow: 1em 0 0 var(--code-highlight-red), -1em 0 0 var(--code-highlight-red);
}
.hl-blue {
    background-color: var(--code-highlight-blue);
    box-shadow: 1em 0 0 var(--code-highlight-blue), -1em 0 0 var(--code-highlight-blue);
}