.codemirror-custom-styles {
  .CodeMirror {
    transition: all var(--fast) var(--transition);
    font-weight: inherit;
    font-family: var(--family-monospace);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--border-radius);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    line-height: 18px;
    height: auto;
    width: 100%;
  }

  .CodeMirror:hover {
    transition: none;
    border-color: var(--input-border-color-hover);
  }

  .CodeMirror-scroll {
    min-height: 200px;
    max-height: 460px;
  }

  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
    background: var(--highlight);
  }

  .CodeMirror.CodeMirror-focused {
    border-color: var(--input-border-color-focus);
  }

  .cm-matchhighlight {
    background-color: var(--blue-grey-50);
    border-radius: var(--border-radius);
  }

  .CodeMirror-selection-highlight-scrollbar {
    background-color: var(--green)
  }

  .CodeMirror-activeline-background {
    background: var(--input-background-color-alt);
  }

  .CodeMirror pre {
    padding: 0 10px;
  }

  .CodeMirror-gutters {
    background-color: var(--input-background-color-alt);
    border-right: 2px solid var(--input-border-color);
  }

  .CodeMirror-linenumber {
    color: var(--blue-grey-200);
  }
  .cm-s-default .cm-keyword {
    color: var(--purple-800);
  }
  .cm-s-default .cm-string {
    color: var(--green);
  }

  .cm-s-default .cm-string-2 {
    color: var(--deep-orange-800);
  }

  .cm-s-default .cm-def {
    color: var(--blue-900);
  }

  .cm-s-default .cm-tag {
    color: var(--green-800);
  }

  .cm-s-default .cm-meta {
    color: var(--grey-700);
  }

  .cm-s-default .cm-number {
    color: var(--orange-500);
  }

  .cm-s-default .cm-atom {
    color: var(--accent);
  }

  .cm-s-default .cm-attribute {
    color: var(--indigo-800);
  }

  .cm-s-default .cm-comment {
    color: var(--blue-grey-300);
  }

  .CodeMirror .CodeMirror-matchingbracket {
    color: inherit;
    border-bottom: 1px solid var(--accent);
  }

  .CodeMirror .CodeMirror-nonmatchingbracket {
    color: var(--red);
  }

  /* The lint marker gutter */
  .CodeMirror-lint-markers {
    width: 16px;
  }

  .CodeMirror-lint-tooltip {
    background-color: var(--white);
    border: 2px solid var(--blue-grey-200);
    border-radius: var(--border-radius);
    color: var(--blue-grey-800);
    font-family: var(--family-monospace);
    font-size: var(--size-3);
    overflow: hidden;
    padding: 12px 12px 12px 8px;
    position: fixed;
    white-space: pre;
    white-space: pre-wrap;
    z-index: 100;
    max-width: 600px;
    opacity: 0;
    transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    -ms-transition: opacity .4s;
  }

  .CodeMirror-lint-tooltip {
    .CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before {
      vertical-align: middle;
      margin-left: -18px;
      margin-right: 6px;
      margin-top: -2px;
    }
  }

  .CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
    background-position: left bottom;
    background-repeat: repeat-x;
  }

  .CodeMirror-lint-mark-error {
    background-image:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
    ;
  }

  .CodeMirror-lint-mark-warning {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
  }

  .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: middle;
    position: relative;
  }

  .CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
    padding-left: 18px;
    background-position: top left;
    background-repeat: no-repeat;
  }

  .CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before,
  .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    font-feature-settings: "liga";
    margin-left: 4px;
  }

  .CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before {
    content: "error";
    color: var(--danger);
  }

  .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
    content: "warning";
    color: var(--warning);
  }

  .CodeMirror-lint-marker-multiple {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 100%; height: 100%;
  }
}
