/* GitHub-flavoured highlight theme; colours follow Bootstrap's data-bs-theme */
:root, [data-bs-theme="light"] {
    --hl-fg: #0d1117;
    --hl-bg: #f6f8fa;
    --hl-keyword: #cf222e;
    --hl-property: #8250df;
    --hl-type: #EA4334;
    --hl-generic: #9d3af6;
    --hl-value: #0a3069;
    --hl-variable: #953800;
    --hl-comment: #6e7781;
    --hl-gutter: #555;
    --hl-addition-bg: #00FF0022;
    --hl-deletion-bg: #FF000011;
}

[data-bs-theme="dark"] {
    --hl-fg: #e6edf3;
    --hl-bg: #161b22;
    --hl-keyword: #ff7b72;
    --hl-property: #d2a8ff;
    --hl-type: #ff8583;
    --hl-generic: #c9a1ff;
    --hl-value: #a5d6ff;
    --hl-variable: #ffa657;
    --hl-comment: #8b949e;
    --hl-gutter: #999;
    --hl-addition-bg: #2ea04326;
    --hl-deletion-bg: #f8514922;
}

/* Code stands out from the page; mermaid pre blocks become diagrams */
pre:not(.mermaid), code {
    color: var(--hl-fg);
    background-color: var(--hl-bg);
}

pre:not(.mermaid) {
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

code {
    padding: 0.125em 0.375em;
    border-radius: 4px;
}

pre code {
    padding: 0;
}

.hl-keyword {
    color: var(--hl-keyword);
}

.hl-property {
    color: var(--hl-property);
}

.hl-attribute {
    font-style: italic;
}

.hl-type {
    color: var(--hl-type);
}

.hl-generic {
    color: var(--hl-generic);
}

.hl-value {
    color: var(--hl-value);
}

.hl-literal {
    color: var(--hl-value);
}

.hl-number {
    color: var(--hl-value);
}

.hl-variable {
    color: var(--hl-variable);
}

.hl-comment {
    color: var(--hl-comment);
}

.hl-blur {
    filter: blur(2px);
}

.hl-strong {
    font-weight: bold;
}

.hl-em {
    font-style: italic;
}

.hl-addition {
    display: inline-block;
    min-width: 100%;
    background-color: var(--hl-addition-bg);
}

.hl-deletion {
    display: inline-block;
    min-width: 100%;
    background-color: var(--hl-deletion-bg);
}

.hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: var(--hl-gutter);
    padding: 0 1ch;
    margin-right: 1ch;
    user-select: none;
}

.hl-gutter-addition {
    background-color: #34A853;
    color: #fff;
}

.hl-gutter-deletion {
    background-color: #EA4334;
    color: #fff;
}