.CodeMirror
  margin: 1em 0
  background: #000
  overflow: auto
  max-height: 300px
  line-height: 1em
  font-family: monospace
  +rounded_corners(5px,5px,5px,5px)

.CodeMirror-gutter
  position: absolute
  left: 0
  top: 0
  background-color: #444
  border-right: 1px solid #555
  min-width: 2em
  height: 100%
  +rounded_corners(5px,0,5px,0)

.CodeMirror-gutter-text
  color: #aaa
  text-align: right
  padding: .4em .2em .4em .4em

.CodeMirror-lines
  padding: .4em
  color: white

.CodeMirror pre
  +rounded_corners(0,0,0,0)
  border-width: 0
  margin: 0
  padding: 0
  background: transparent
  font-family: inherit

.CodeMirror-cursor
  z-index: 10
  position: absolute
  visibility: hidden
  border-left: 1px solid #eee !important

.CodeMirror-focused .CodeMirror-cursor
  visibility: visible

span.CodeMirror-selected
  background: #ccc !important
  color: HighlightText !important

.CodeMirror-focused span.CodeMirror-selected
  background: Highlight !important

.CodeMirror-matchingbracket
  color: #0f0 !important

.CodeMirror-nonmatchingbracket
  color: #f22 !important

span
  &.js-keyword
    color: #a3d6fb
  &.js-atom
    color: #d9797b
  &.js-variabledef
    color: #a5d3ad
  &.js-localvariable
    color: #d1d2fb
  &.js-comment
    color: #8f8f8f
  &.js-string, &.cm-string
    color: #91be77
