/**
 * Sourcegraph theme for CodeMirror.
 *
 * We define this using SASS (CodeMirror themes are usually css) because:
 *
 * 1. GraphiQL doesn't allow switching the CodeMirror theme at runtime
 *    (changing `editorTheme` prop does not work) and we workaround the issue
 *    using our theme-light and theme-dark classes.
 * 2. It is easier to define our two themes for light and dark variants using
 *    nesting rather than total duplication.
 *
 **/

/* stylelint-disable selector-class-pattern */

.theme-light {
    --theme-bg-plain: white;
    --theme-color-plain: #2c3850;
    --theme-color-gutter: #c3ccdf;
    --theme-bg-selection: #e4e9f2;
    --theme-color-comment: #92a1a1;
    --theme-color-constant: #6c71c4;
    --theme-border-cursor: #2c3850;
    --theme-color-keyword: #278ad3;
    --theme-color-definition: #b58901;
    --theme-color-attribute: #278ad3;
    --theme-color-property: #b58901;
    --theme-color-brackets: #647b82;
    --theme-color-brackets-matching: #647b82;
    --theme-color-string: #2ba097;
    --theme-color-builtin: #b58900;
}
.theme-dark {
    --theme-bg-plain: #0e121b;
    --theme-color-plain: #f2f4f8;
    --theme-color-gutter: #31445e;
    --theme-bg-selection: #232d3b;
    --theme-color-comment: #2c8a3d;
    --theme-color-constant: #329af0;
    --theme-border-cursor: #a2b0cd;
    --theme-color-keyword: #329af0;
    --theme-color-definition: #c0c5cf;
    --theme-color-attribute: #72c3fc;
    --theme-color-property: #fef3c0;
    --theme-color-brackets: #c0c5cf;
    --theme-color-brackets-matching: #c0c5cf;
    --theme-color-string: #ffb0af;
    --theme-color-builtin: #329af0;
}

.cm-s-sourcegraph {
    &.CodeMirror {
        background: var(--theme-bg-plain);
        color: var(--theme-color-plain);
    }
    div.CodeMirror-selected {
        background: var(--theme-bg-selection);
    }
    .CodeMirror-line::selection,
    .CodeMirror-line > span::selection,
    .CodeMirror-line > span > span::selection {
        background: var(--theme-bg-selection);
    }
    .CodeMirror-line::-moz-selection,
    .CodeMirror-line > span::-moz-selection,
    .CodeMirror-line > span > span::-moz-selection {
        background: var(--theme-bg-selection);
    }
    .CodeMirror-gutters {
        background: var(--theme-bg-plain);
        border-right: 0;
    }
    .CodeMirror-guttermarker {
        color: var(--theme-color-gutter);
    }
    .CodeMirror-guttermarker-subtle {
        color: var(--theme-color-gutter);
    }
    .CodeMirror-linenumber {
        color: var(--theme-color-gutter);
    }
    .CodeMirror-cursor {
        border-left: 1px solid var(--theme-border-cursor);
    }

    span.cm-comment {
        color: var(--theme-color-comment);
    }
    span.cm-atom {
        color: var(--theme-color-constant);
    }
    span.cm-number {
        color: var(--theme-color-constant);
    }

    span.cm-attribute {
        color: var(--theme-color-attribute);
    }
    span.cm-property {
        color: var(--theme-color-property);
    }
    span.cm-keyword {
        color: var(--theme-color-keyword);
    }
    span.cm-builtin {
        color: var(--theme-color-builtin);
    }
    span.cm-string {
        color: var(--theme-color-string);
    }

    span.cm-variable,
    span.cm-variable-2,
    span.cm-variable-3,
    span.cm-type {
        color: var(--theme-color-plain);
    }
    span.cm-def {
        color: var(--theme-color-definition);
    }
    span.cm-bracket {
        color: var(--theme-color-plain);
    }
    span.cm-punctuation {
        color: var(--theme-color-brackets);
    }
    span.cm-tag {
        color: var(--theme-color-keyword);
    }
    span.cm-header {
        color: var(--theme-color-constant);
    }
    span.cm-link {
        color: var(--theme-color-constant);
    }

    .CodeMirror-activeline-background {
        background: var(--theme-bg-plain);
    }
    .CodeMirror-matchingbracket {
        text-decoration: underline;
        color: var(--theme-color-brackets-matching) !important;
    }
}