:root {
    color-scheme: light dark;
    &:has(input[name="color-scheme"][value="light dark"]:checked) {
        color-scheme: light dark;
    }
    &:has(input[name="color-scheme"][value="light"]:checked) {
        color-scheme: light;
    }
    &:has(input[name="color-scheme"][value="dark"]:checked) {
        color-scheme: dark;
    }
}

.shj-multiline {
    padding: 0;
    & > div {
        padding: 8px 2px;
    }
}

[class*="shj-lang-"],
[class*="shj-lang-"] * {
    scrollbar-width: thin;
}

[class*="shj-lang-"] {
    white-space: pre;
    color: light-dark(#112, #c9d1d9);
    max-width: min(100%, 100vw);
    font: 18px/24px;
}

[class*="shj-lang-"]::selection {
    background: #bdf5;
}

[class*="shj-lang-"] ::selection {
    background: #bdf5;
}

[class*="shj-lang-"] > div {
    display: flex;
    overflow: auto;
}

[class*="shj-lang-"] > div :last-child {
    outline: none;
    flex: 1;
}

.shj-numbers {
    counter-reset: line;
    padding-left: 5px;
}

.shj-numbers div {
    padding-right: 5px;
}

.shj-numbers div:before {
    color: #999;
    content: counter(line);
    opacity: 0.5;
    text-align: right;
    counter-increment: line;
    margin-right: 5px;
    display: block;
}

.shj-syn-cmnt {
    font-style: italic;
}

.shj-syn-insert {
    color: light-dark(#7d8, #98c379);
}

.shj-syn-deleted,
.shj-syn-err,
.shj-syn-kwd {
    color: light-dark(#cf222e, #ff7b72);
}

.shj-syn-class {
    color: light-dark(#953800, #ffa657);
}

.shj-numbers,
.shj-syn-cmnt {
    color: light-dark(#6e7781, #8b949e);
}

.shj-syn-type,
.shj-syn-oper,
.shj-syn-num,
.shj-syn-section,
.shj-syn-var,
.shj-syn-bool {
    color: light-dark(#0550ae, #79c0ff);
}

.shj-syn-str {
    color: light-dark(#0a3069, #a5d6ff);
}

.shj-syn-func {
    color: light-dark(#8250df, #d2a8ff);
}

.shj-lang-http.shj-oneline .shj-syn-kwd {
    color: #fff;
    background: #25f;
    border-radius: 5px;
    padding: 5px 7px;
}