$gray: #bdbdbd !default;
$blue-dark: #3f51b5 !default;
$gray-darker: #212121 !default;
$red-dark: #b71c1c !default;

/* stylelint-disable selector-class-pattern */
.yqg-code-textarea {
    .CodeMirror {
        padding: 5px 10px;
        border: 1px solid #f3f3f3;
        border-radius: 2px;
        font-size: 13px;
        line-height: 1.4375;
        background-color: #f3f3f3;
        color: #2e383c;

        pre {
            padding: 0;
        }

        &-focused {
            border-color: #ccc;
        }

        .CodeMirror-vsscrollbar {
            z-index: 0;
        }

        .CodeMirror-gutters {
            border: none;
            border-right: 10px solid transparent;
            background-color: transparent;
        }

        .CodeMirror-linenumber {
            padding: 0;
            color: $gray;
        }

        .CodeMirror-guttermarker {
            color: #1d75b3;
        }

        .CodeMirror-guttermarker-subtle {
            color: #e0e2e5;
        }

        .CodeMirror-cursor {
            width: auto;
            border: 0;
            background: rgb(155 157 162 / 37%);
            z-index: 1;
        }

        .CodeMirror-matchingbracket {
            color: $gray;
        }

        .cm-comment {
            color: #75787b;
        }

        .cm-keyword,
        .cm-property {
            color: $blue-dark;
        }

        .cm-atom,
        .cm-number {
            color: $red-dark;
        }

        .cm-node,
        .cm-tag {
            color: #9c3328;
        }

        .cm-string {
            word-break: break-all;
            color: $blue-dark;
        }

        .cm-variable,
        .cm-qualifier {
            color: $gray-darker;
        }
    }
}