@import 'colors';

html,
body {
    padding: 0;
    margin: 0;
    background-color: $primary_bg;
}

.code {
    background: $light-background;
    border-radius: 0.5rem;

    .code-header {
        background: $light-background;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        border-bottom: 1px solid $primary_fg;
        padding: 5px;

        > button {
            color: $default_fg;
            background: transparent;
            float: right;
            border: none;

            &:before {
                content: '󰆏';
                display: inline-block;
                padding-right: 0.5rem;
            }
        }
    }
}

$languages-map: (
    arduino: '',
    armasm: '',
    avrasm: '',
    bash: '',
    c: '',
    clojure: '',
    coffeescript: '',
    cpp: '',
    csharp: '󰌛',
    css: '',
    dockerfile: '󰡨',
    go: '',
    gradle: '',
    haskell: '',
    html: '',
    java: '',
    javascript: '󰌞',
    json: '',
    latex: '',
    lua: '󰢱',
    makefile: '',
    markdown: '',
    mipsasm: '',
    nginx: '',
    nix: '󱄅',
    php: '',
    prolog: '',
    python: '',
    r: '󰟔',
    ruby: '',
    rust: '',
    scss: '',
    shell: '',
    typescript: '󰛦',
    wasm: '',
    x86asm: '',
    xml: '󰗀',
);

@each $lang, $content in $languages-map {
    [data-language='#{$lang}']:before {
        content: $content;
        font-size: 1.1rem;
        color: $primary_fg;
        padding-right: 0.5rem;
    }
}

pre {
    padding: 5px;
    overflow-x: scroll;

    code.hljs {
        color: $default_fg;
        background: transparent;
    }
}

code {
    & .hljs-keyword {
        color: $mauve;
    }

    & .hljs-built_in {
        color: $red;
    }

    & .hljs-type {
        color: $yellow;
    }

    & .hljs-literal,
    & .hljs-number {
        color: $orange;
    }

    & .hljs-operator {
        color: $teal;
    }

    & .hljs-punctuation {
        color: $lightteal;
    }

    & .hljs-property,
    & .hljs-variable.language_,
    & .hljs-symbol {
        color: $teal;
    }

    & .hljs-regexp {
        color: $pink;
    }

    & .hljs-string,
    & .hljs-char.escape_,
    & .hljs-subst {
        color: $green;
    }

    & .hljs-comment {
        color: $grey;
    }

    & .hljs-doctag {
        color: $red;
    }

    & .hljs-meta,
    & .hljs-title.function_,
    & .hljs-section {
        color: $orange;
    }

    & .hljs-tag,
    & .hljs-attribute {
        color: $lightgrey;
    }

    & .hljs-name,
    & .hljs-selector-attr {
        color: $mauve;
    }

    & .hljs-params,
    & .hljs-selector-class,
    & .hljs-template-variable {
        color: $default_fg;
    }

    & .hljs-selector-tag {
        color: $yellow;
    }

    & .hljs-selector-id {
        color: $blue;
    }

    & .hljs-bullet,
    & .hljs-code,
    & .hljs-formula {
        color: $teal;
    }

    & .hljs-emphasis {
        color: $red;
        font-style: italic;
    }

    & .hljs-strong {
        color: $red;
        font-weight: bold;
    }

    & .hljs-link {
        color: $lightblue;
        font-style: italic;
    }

    & .hljs-quote {
        color: $green;
        font-style: italic;
    }

    & .hljs-addition {
        color: $green;
        background: rgba(166, 227, 161, 0.15);
    }

    & .hljs-deletion {
        color: $red;
        background: rgba(243, 139, 168, 0.15);
    }
}
