@import "css/variables";

$color-red: #EA4334;
$color-blue: #4285F4;
$color-green: #34A853;
$color-yellow: #FCBC05;
$color-purple: #9d3af6;

:root {

    --code-background: #f3f3f3;
    --code-foreground: #000000;
    --code-keyword: #4f95d1;
    --code-property: #4cb966;
    --code-type: #d14f57;
    --code-generic: #9d3af6;
    --code-value: #515248;
    --code-comment: #888888;
    --code-highlight: #22dddd33;
    --code-addition: #00ff0022;
    --code-deletion: #ff000011;
    --code-gutter: #555555;
    --code-gutter-addition: #34a853;
    --code-gutter-deletion: #ea4334;
    --code-moderate: #fef9c3;
    --code-complex: #fee2e2;
    --code-adverb: #e0f2fe;
    --code-passive: #dcfce7;
    --code-complex-phrase: #f3e8ff;
    --code-qualified: #f1f5f9;
}

.hl-deletion {
    background-color: $color-red;
    color: #fff;
}

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

.hl-striped {
    background: none;
    border-bottom: dotted 3px $color-red;
}

.hl-keyword {
    color: $color-blue;
}

.hl-property {
    color: $color-green;
}

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

.hl-generic .hl-type,
.hl-generic {
    color: $color-purple;
}

.hl-type {
    color: $color-red;
}


.hl-comment {
    color: #888888;
}

.hl-value {
    color: #000;
}

.hljs {
    display: block;
    overflow-x: auto;
    color: #000;
}

.hljs-comment,
.hljs-quote {
    color: #888888;
    font-style: italic;
}

.hljs-highlight.keyword,
.language-html .hljs-name,
.language-html .hljs-tag,
.hljs-meta,
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: $color-blue;
    background: none;
}

.hljs-highlight.numeric,
.hljs-number {
    color: #222;
    background: none;
}

.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: $color-red;
}

.hljs-string,
.hljs-doctag {
    color: #222;
}

.language-html .hljs-string {
    color: $color-green;
}


.hljs-highlight.property,
.hljs-highlight.prop,
.hljs-highlight.prop > .hljs-keyword,
.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: $color-green;
    background: none;
}

.hljs-subst {
    font-weight: normal;
}

.hljs-highlight.type,
.hljs-highlight.type span,
.hljs-highlight.type .hljs-title,
.hljs-type,
.hljs-params + .hljs-title,
.hljs-class .hljs-title {
    color: $color-red;
    background: none;
}

.blur span,
.blur {
    color: #888 !important;
    filter: blur(0.04em);
}

.generic,
.generic > .hljs-title,
{
    color: $color-purple;
}


.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: #222;
    font-weight: normal;
}

.language-css .hljs-attribute,
.hljs-regexp,
.hljs-link {
    color: $color-green;
}

.language-html .hljs-attr {
    color: $color-green;
}

.hljs-symbol,
.hljs-bullet {
    color: $color-purple;
}

.hljs-built_in,
.hljs-builtin-name {
    color: $color-red;
}

.hljs-deletion {
    background: #fdd;
}

.hljs-addition {
    background: #dfd;
}

.hljs-emphasis {
    font-style: italic;
}

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

.hljs-highlight {
    display: inline;

    &.comment {
        background: none;
        color: #888888;
        font-style: italic;
    }

    &.text {
        color: #000;
    }

    &.error {
        background-color: #fdd;
    }

    &.text span,
    &.text {
        color: $color-black;
        background: none;
    }

    &.yellow {
        background-color: #ffa;
    }

    &.blue {
        background-color: #aff;
    }

    &.red {
        background-color: #fdd;
    }

    &.purple {
        background-color: #fdf;
    }

    &.cyan {
        background-color: #aef4db;
    }

    &.darkblue {
        background-color: #ddf;
    }

    &.green {
        background-color: #dfd;
    }

    &.grey {
        background-color: #ddd;
    }

    &.textgrey {
        color: #aaa;
        background: none;
    }

    &.full,
    &.line {
        display: block;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + (2 * 1.5rem));
        padding-left: 1.5rem;

        @media(max-width: $width-base) {
            margin-left: -1rem;
            margin-right: -1rem;
            width: calc(100% + (2 * 1rem));
            padding-left: 1rem;
        }
    }

    &.striped {
        background: none;
        border-bottom: dotted 3px red;
    }

    &.error.full {
        & .hljs-keyword,
        & .hljs-comment {
            color: #000;
        }
    }
}

.hl-error {
    background: none;
    border-bottom: dotted 3px #ea4334;
}

.hl-error-message {
    background-color: #ea4334;
    padding: 2px 3px;
    color: #fff;

    & span {
        color: inherit;
    }
}

.hl-console-underline {
    text-decoration: underline;
}
.hl-console-strong {
    font-weight: bold;
}
.hl-console-comment {
    color: var(--code-comment);
}
.hl-console-em {
    color: var(--code-keyword);
    font-weight: bold;
}
.hl-console-dim {
    color: var(--code-comment);
}

.hl-console-question,
.hl-console-error,
.hl-console-success,
.hl-console-h1,
.hl-console-h2 {
    color: #fff;
    display: inline-block;
    line-height: 1.9em;
    padding: 0 5px;
}

.hl-console-question {
    background-color: var(--code-keyword);
}
.hl-console-error {
    background-color: var(--code-type);
}
.hl-console-success {
    background-color: var(--code-property);
}
.hl-console-h1 {
    background-color: #4ab1d1;
    font-weight: bold;
    line-height: 2em;
}
.hl-console-h2 {
    background-color: var(--code-keyword);
    line-height: 1.8em;
}