/*
    Based of: https://userstyles.org/styles/98634/codemirror-monokai-stylish-editor 
    
    Author:      Twily                       2014
    Description: Theme for the stylish css editor
*/
@namespace url(http://www.w3.org/1999/xhtml);

:root {
    --font-family: "PragmataPro","Droid Sans Mono",monospace; --font-size: 10pt;
    --bg-color:    #111113;
    --fg-c-white:  #aaabad;    --fg-cl-white:  #cecfd1;
    --fg-c-gray:   #27282B;    --fg-cl-gray:   #606163;
    --fg-c-red:    #d54a56;    --fg-cl-red:    #f66a79;
    --fg-c-green:  #84bd3f;    --fg-cl-green:  #a4e35a;
    --fg-c-yellow: #cb873d;    --fg-cl-yellow: #f4aa5c;
    --fg-c-blue:   #6f67e6;    --fg-cl-blue:   #8c86fc;
    --fg-c-purple: #d753a4;    --fg-cl-purple: #ea75bc;
    --fg-c-cyan:   #45b791;    --fg-cl-cyan:   #68e0b8;
}

@-moz-document url-prefix("chrome://stylish/content/edit.xul"), url-prefix("about:") { }
@-moz-document regexp("data:text/html.*rel='stylesheet'%20href='chrome://browser/content/devtools/codemirror/codemirror.css'.*") {
    div.cm-s-mozilla {
        font-family: var(--font-family); font-size: var(--font-size);
        background: var(--bg-color); color: var(--fg-cl-white);
    }
    .cm-s-mozilla div.CodeMirror-selected,
    .cm-s-mozilla.CodeMirror-focused div.CodeMirror-selected { background: var(--fg-c-gray); }
    .cm-s-mozilla .CodeMirror-gutter                         { background: var(--bg-color); margin-right: -1px; }
    .cm-s-mozilla div.CodeMirror-linenumber                  { color: var(--fg-cl-gray); background: var(--bg-color); }
    .cm-s-mozilla  .CodeMirror-lines div.CodeMirror-cursor   { border-left: 1px solid var(--fg-cl-white); }

    .cm-s-mozilla span.cm-comment           { color: var(--fg-c-blue); }
    .cm-s-mozilla span.cm-atom              { color: var(--fg-c-red); }
    .cm-s-mozilla span.cm-number            { color: var(--fg-c-red); }

    .cm-s-mozilla span.cm-property,
    .cm-s-mozilla span.cm-attribute         { color: var(--fg-c-green); }
    .cm-s-mozilla span.cm-keyword           { color: var(--fg-c-purple); }
    .cm-s-mozilla span.cm-string            { color: var(--fg-c-red); }

    .cm-s-mozilla span.cm-variable          { color: var(--fg-c-red); }
    .cm-s-mozilla span.cm-variable-2        { color: var(--fg-c-red); }
    .cm-s-mozilla span.cm-variable-3        { color: var(--fg-c-purple); }
    .cm-s-mozilla span.cm-def               { color: var(--fg-cl-white); }
    .-cm-s-mozilla span.cm-error            { background: var(--fg-c-red); color: var(--fg-cl-white); }
    .cm-s-mozilla span.cm-bracket           { color: var(--fg-cl-white); }
    .cm-s-mozilla span.cm-tag,
    .cm-s-mozilla span.cm-property.cm-error { color: var(--fg-c-yellow); }
    .cm-s-mozilla span.cm-link              { color: var(--fg-cl-blue); }

    .cm-s-mozilla pre:not(hing)             { color: var(--fg-c-cyan); }
    .cm-s-mozilla span.cm-qualifier         { color: var(--fg-cl-cyan); }
    .cm-s-mozilla span.cm-operator          { color: inherit; }

    .cm-s-mozilla span.cm-builtin, .cm-s-mozilla span[class="cm-error"] { color: inherit; }
    .cm-s-mozilla.CodeMirror .CodeMirror-matchingbracket                { text-decoration: underline; color: var(--fg-cl-white); }
    .cm-s-mozilla div.CodeMirror-activeline-background                  { background-color: var(--bg-color); }
}