// Bootstrap theme for CodeMirror
.cm-s-bootstrap {
  --cm-body: var(--bs-body-color);
  --cm-blue: #{$editor-blue};
  --cm-pink: #{$editor-pink};
  --cm-indigo: #{$editor-indigo};
  --cm-teal: #{$editor-teal};
  --cm-orange: #{$editor-orange};
  --cm-red: #{$red};
  --cm-gray: #{$text-muted};
  --cm-purple: #{$editor-purple};
  --cm-yellow: #{$editor-yellow};
  --cm-green: #{$editor-green};
  --cm-link: #{$editor-link-color};

  &.CodeMirror {
    font-family: $font-family-monospace, monospace;
    background: $card-bg;
    color: var(--cm-body);
    line-height: 1.2;
  }

  .cm-header {color: var(--cm-blue);}
  .cm-quote {color: var(--cm-green);}

  .cm-keyword {color: var(--cm-pink);}
  .cm-atom {color: var(--cm-indigo);}
  .cm-number {color: var(--cm-teal);}
  .cm-def {color: var(--cm-blue);}
  .cm-variable,
  .cm-punctuation,
  .cm-property,
  .cm-operator {color: var(--cm-body);}
  .cm-variable-2 {color: var(--cm-blue);}
  .cm-variable-3, .cm-type {color: var(--cm-teal);}
  .cm-comment {color: var(--cm-orange);}
  .cm-string {color: var(--cm-red);}
  .cm-string-2 {color: var(--cm-orange);}
  .cm-meta {color: var(--cm-gray);}
  .cm-qualifier {color: var(--cm-gray);}
  .cm-builtin {color: var(--cm-purple);}
  .cm-bracket {color: var(--cm-yellow);}
  .cm-tag {color: var(--cm-green);}
  .cm-attribute {color: var(--cm-blue);}
  .cm-hr {color: var(--cm-blue);}
  .cm-link {color: var(--cm-link);}
  .cm-tab {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
    background-position: right;
    background-repeat: no-repeat;
  }

  .cm-error {color: var(--cm-red);}

  .cm-negative {
    color: var(--cm-red);
  }

  .CodeMirror-negative-line {
    background: rgba($danger, 0.1);
  }
  .cm-positive {
    color: $editor-success;
  }

  .CodeMirror-positive-line {
    background: rgba($editor-success, 0.1);
  }

  .CodeMirror-gutters {
    background: var(--bs-secondary-bg);
    border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
  }
  .CodeMirror-guttermarker { color: var(--cm-gray); }
  .CodeMirror-guttermarker-subtle { color: var(--cm-gray); }
  .CodeMirror-linenumber { color: var(--cm-gray); }
  div.CodeMirror-selected {
    background: $editor-primary;
    opacity: 0.2;
  }

  // Don't display cursor if not editable view
  .CodeMirror-cursor { border-left: 0px; }
}

@include color-mode(dark) {
  .cm-s-bootstrap {
    --cm-blue: #{lighten($editor-blue, 20%)};
    --cm-pink: #{lighten($editor-pink, 20%)};
    --cm-indigo: #{lighten($editor-indigo, 40%)};
    --cm-teal: #{lighten($editor-teal, 20%)};
    --cm-orange: #{lighten($editor-orange, 20%)};
    --cm-red: #{lighten($danger, 20%)};
    --cm-purple: #{lighten($editor-purple, 20%)};
    --cm-yellow: #{lighten($editor-warning, 20%)};
    --cm-green: #{lighten($editor-success, 20%)};
    --cm-link: #{lighten($editor-link-color, 20%)};
  }
}

.editable .cm-s-bootstrap .CodeMirror-cursor { border-left: 1px solid var(--cm-body); }

.editor-bg {
  background-color: var(--bs-secondary-bg);
}
