@import 'package:jaspr_pad/scss/colors';
@import 'package:jaspr_pad/scss/variables';

// dart parser:
// https://github.com/codemirror/CodeMirror/blob/0f437b9addb3e4308519d208a606c152d42cf0a2/mode/dart/dart.js

.cm-s-darkpad span {
  font-family: $editor-font;
  font-weight: 400;
}

.cm-s-darkpad .CodeMirror-matchingbracket {outline: 1px solid #606060;color: $dark-red !important;}
.cm-s-darkpad .CodeMirror-selected {background: $dark-selection-color !important;}

.cm-s-darkpad .CodeMirror-gutters { background: $dark-code-background-color !important; border-right: none}
.cm-s-darkpad .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: $dark-gutter-line-number-color; }
.cm-s-darkpad .CodeMirror-linenumber { color: $dark-gutter-line-number-color; }
.cm-s-darkpad .CodeMirror-cursor { border-left: 1px solid white; }
.cm-s-darkpad .CodeMirror-cursors.CodeMirror-overwrite .CodeMirror-cursor { margin-top: 2px; width: auto; border-left: none; background-color: rgba(255,255,255,0.7); }
.cm-s-darkpad { background-color: $dark-code-background-color; color: $dark-editor-text; }
.cm-s-darkpad span.cm-builtin { color: $dark-editor-text; }
.cm-s-darkpad span.cm-comment { color: $dark-comment; }
.cm-s-darkpad span.cm-keyword { color: $dark-green;}
.cm-s-darkpad span.cm-atom { color: $dark-orange; }
.cm-s-darkpad span.cm-variable { color: $dark-blue; }
.cm-s-darkpad span.cm-variable-2 { color: $dark-orange;}
.cm-s-darkpad span.cm-string { color: $dark-pink; }
.cm-s-darkpad span.cm-string-2 { color: $dark-pink-2; }
.cm-s-darkpad span.cm-number { color: $dark-teal; }
.cm-s-darkpad span.cm-attribute { color: $dark-blue; }
.cm-s-darkpad span.cm-qualifier { color: $dark-orange-2; }
.cm-s-darkpad span.cm-meta { color: $dark-teal; }
.cm-s-darkpad span.cm-header { color: $dark-blue; }
.cm-s-darkpad span.cm-operator { color: $dark-editor-text; }
.cm-s-darkpad span.cm-def { color: $dark-editor-text; }
.cm-s-darkpad span.cm-tag { color: $dark-green; }
.cm-s-darkpad span.cm-property { color: $dark-red; }

.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
  background: $dark-scrollbar-color;
}

#editor-host .CodeMirror-scrollbar-filler {
  background-color: $playground-background-color !important;
}

// code folding styles

.cm-s-darkpad .CodeMirror-foldmarker {
  background-color:rgb(82, 192, 155);
  color: #000;
  font-weight: bold !important;
  cursor: pointer;
}
.cm-s-darkpad .CodeMirror-foldgutter {
  width: .7em;
}
.cm-s-darkpad .CodeMirror-foldgutter-open,
.cm-s-darkpad .CodeMirror-foldgutter-folded {
  cursor: pointer;
}
.cm-s-darkpad .CodeMirror-foldgutter-open:after {
  content: "\25BE";
  font-size: 18px;
  position: absolute;
  top: -4px;
  left: -2px;
  color: $dark-gutter-line-number-color;
}
.cm-s-darkpad .CodeMirror-foldgutter-folded:after {
  content: "\25B8";
  font-size: 18px;
  position: absolute;
  top: -4px;
  left: -2px;
  color: rgb(82, 192, 155);
}
.cm-s-darkpad span.CodeMirror-matchingtag {
  background-color: #606060;
}

// dialogs used for vim keymapping (set fallback and darkpad theme selectors)

.CodeMirror-dialog.CodeMirror-dialog-bottom,
.cm-s-darkpad .CodeMirror-dialog.CodeMirror-dialog-bottom {
  border-top: 1px solid #eee;
  position: absolute;
  background:  $dark-code-background-color;
  color: $dark-editor-text;
  z-index: 990;
  width: 100%;
  bottom: 0px;
  left: 0px;
  padding-left: 35px;
  padding-bottom: 3px;
  padding-top: 3px;
}

.CodeMirror-dialog .cm-vim-message,
.cm-s-darkpad .CodeMirror-dialog .cm-vim-message {
  border-top: 1px solid $dark-red;
  border-bottom: 1px solid $dark-red;
  width: fit-content;
  background:  $dark-code-background-color;
  color: $dark-red;
  font-weight: bold;
  padding: 3px 35px 3px 35px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.CodeMirror-dialog input
.cm-s-darkpad .CodeMirror-dialog input {
    margin-left: 4px;
    margin-right: 8px;
    width: 200px;
    max-width: max-content;
    background: rgba(255,255,255,0.9);
    color: black;
}

