@import 'codemirror';
@import 'codemirror/liquid';
@import 'codemirror/themes/neat';

/* adjusted copy of the 'neat' theme which we are using */
.CodeMirror-scroll {
  min-height: 20em;
  border: 5px solid $codemirror-border;
}

.CodeMirror{
  line-height: 15px;
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
  font-size:14px;
  border: 1px solid $border-color;
  height: auto;
}

.cm-s-neat {
  background-color: $codemirror-bg;
  color: white;
}

.cm-s-neat .CodeMirror-linenumber { color: white; }
.cm-s-neat div.CodeMirror-selected { background: $codemirror-selected-bg !important;}

.cm-s-neat .CodeMirror-gutter { background: darken(white,40%); border-right: 0px;}
.cm-s-neat .CodeMirror-gutter-text { color: white; }
.cm-s-neat .CodeMirror-cursor { border-left: 2px solid $codemirror-cursor-color !important;}

.cm-s-neat span.cm-variable { color: black; }
.cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: $codemirror-number-color; }
.cm-s-neat span.cm-meta {color: $codemirror-meta-color; }
.cm-s-neat span.cm-link { color: #3a3; }

.cm-s-neat span.cm-comment { color: $codemirror-comment-color; }
.cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: $codemirror-keyword-color }
.cm-s-neat span.cm-string { color: #A5C261; }
.cm-s-neat span.cm-builtin { line-height: 1em; font-weight: bold; color: $codemirror-builtin-color; }
.cm-s-neat span.cm-special { line-height: 1em; font-weight: bold; color: #0aa; }

.cm-s-neat span.cm-property, .cm-s-neat span.cm-attribute {color: $codemirror-attr-color; }
.cm-s-neat span.cm-variable { color: $codemirror-vars-color; }
.cm-s-neat span.cm-variable-2 {color: $codemirror-vars2-color;}
.cm-s-neat span.cm-def {color: $codemirror-color-def; }
.cm-s-neat span.cm-tag {color: $codemirror-color-tag; }

// .cm-s-neat span.cm-error {background: #f92672; color: #f8f8f0;}
// .cm-s-neat span.cm-bracket {color: #f8f8f2;}
// .cm-s-neat span.cm-link {color: #ae81ff;}

.cm-s-neat .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: red !important;
}
