.cm-s-yonce.CodeMirror,
.CodeMirror {
  background: $contrast;
  color: $fg;
  border-color: $hl;
}

.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
  background-color: $bg;
}

.CodeMirror-gutters {
  border-right: 1px solid $border;
  background-color: $bg2;
}

.CodeMirror-linenumber {
  color: $text;
}

.CodeMirror-guttermarker {
  color: $fg;
}

.CodeMirror-guttermarker-subtle {
  color: $disabled;
}

.CodeMirror-cursor {
  border-left: 1px solid $accent;
}

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid $borderLight;
}

.cm-fat-cursor {
  .CodeMirror-cursor {
    background: $accent;
  }
}

.cm-fat-cursor-mark {
  background-color: $accentT;
}

.cm-animate-fat-cursor {
  background-color: $accent;
}

.CodeMirror-ruler {
  border-left: 1px solid $borderLight;
}

.cm-s-yonce,
.cm-s-default {
  div.CodeMirror-selected {
    background: $selectBg;
  }

  .CodeMirror-line {
    &::-moz-selection,
    &::selection {
      background: $selectBg;
    }

    > span {
      &::-moz-selection,
      &::selection {
        background: $selectBg;
      }

      > span {
        &::-moz-selection,
        &::selection {
          background: $selectBg;
        }
      }
    }
  }

  .CodeMirror-selected,
  .CodeMirror-selectedtext {
    background: $selectBg;
  }

  .CodeMirror-gutters {
    background: $contrast;
  }

  .CodeMirror-activeline .CodeMirror-linenumber.CodeMirror-gutter-elt {
    background: $contrast;
    color: $accent;
  }

  .CodeMirror-linenumber {
    color: $text;
  }

  .CodeMirror-cursor {
    border-left: 2px solid $accent;
  }

  .cm-searching {
    background: $primary !important;
    outline: 1px solid $primary;
    color: black;

    &.CodeMirror-selectedtext {
      background: $selectBg !important;
      color: $selectFg;
    }
  }

  .CodeMirror-activeline-background {
    background: $hl;
  }

  .CodeMirror-matchingbracket {
    color: $primary !important;
    outline: 1px solid $accent;
  }

  .cm-negative {
    color: $red;
  }

  .cm-positive {
    color: $green;
  }

  .cm-header {
    color: $blue;
  }

  .cm-quote {
    color: $green;
  }

  .cm-tag.cm-bracket,
  .cm-operator,
  .cm-qualifier {
    color: $cyan;
  }

  .cm-keyword {
    color: $purple;
  }

  .cm-atom {
    color: $orange;
  }

  span.cm-type,
  .cm-number {
    color: $orange;
  }

  .cm-callee,
  .cm-property.cm-def,
  .cm-type.cm-def,
  .cm-def {
    color: $blue;
  }

  .cm-variable-2 {
    color: $red;
  }

  .cm-type,
  .cm-variable-3 {
    color: $yellow;
  }

  .cm-comment {
    color: $gray;
  }

  .cm-string {
    color: $green;
  }

  .cm-string-2 {
    color: $cyan;
  }

  .cm-meta,
  .cm-qualifier {
    color: $purple;
  }

  .cm-builtin {
    color: $blue;
  }

  .cm-bracket {
    color: $fg;
  }

  .cm-comment.cm-tag,
  .cm-tag {
    color: $red;
  }

  .cm-comment.cm-attribute,
  .cm-attribute {
    color: $yellow;
  }

  .cm-hr {
    color: $borderLight;
  }

  .cm-link {
    color: $accent;
  }

  .cm-property,
  .cm-variable {
    color: $silver;
  }

  .cm-invalidchar,
  .cm-error {
    color: $red2;
  }

  span {
    &.cm-variable {
      color: $silver;
      font-style: italic;
    }

    &.cm-variable-2 {
      color: $purple;
      font-style: italic;
    }

    &.cm-variable-3 {
      color: $cyan;
    }
  }
}

div.CodeMirror span {
  &.CodeMirror-matchingbracket {
    color: $cyan;
  }

  &.CodeMirror-nonmatchingbracket {
    color: $red;
  }
}

.CodeMirror-matchingtag {
  background: $orange;
}

.CodeMirror-activeline-background {
  background: $tree;
}

.CodeMirror {
  background: $contrast;
}

.CodeMirror-selected {
  background: $selectBg;
}

.CodeMirror-focused .CodeMirror-selected {
  background: $selectBg;
}

.CodeMirror-line {
  &::-moz-selection {
    background: $tree;
  }

  > span {
    &::-moz-selection,
    > span::-moz-selection {
      background: $tree;
    }
  }

  &::selection {
    background: $tree;
  }

  > span {
    &::selection,
    > span::selection {
      background: $tree;
    }
  }

  &::-moz-selection {
    background: $tree;
  }

  > span {
    &::-moz-selection,
    > span::-moz-selection {
      background: $tree;
    }
  }
}

.cm-searching {
  background-color: $accentT;
}

.CodeMirror {
  border: 1px solid $borderLight;
  color: $fg;

  .CodeMirror-gutters {
    background-color: $bg;
    border-color: $border;
  }

  .CodeMirror-linenumber {
    color: $text;
  }

  &:focus,
  &:hover {
    border-color: $disabled;
  }
}

.CodeMirror pre {
  background-color: transparent;
  border: none;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  color: $fg;
}
