:root {
  --js-default: var(--text-color);
  --js-keyword: var(--light-blue);
  --js-operator: var(--lighter-blue);
  --js-string: #2dd07e;
  --js-comment: #546E7A;
  --cursor-color: #f8f8f0;
  --cm-operator: rgb(159, 216, 255);
  --cm-atom: #F77669;
  --cm-qualifier: #37bf4f;
  --selection: rgb(52 181 255 / 25%);
  --search-outline: rgb(52 181 255 / 60%);
  --line-numbers:#515B5F;
}

[data-theme="light"] {
  --js-comment: #97a7af;
  --cursor-color: var(--text-color);
  --cm-operator: var(--js-keyword);
  --cm-atom: #e34535;
  --cm-qualifier: var(--html-attribute);
  --js-string: #149f59;
  --selection: rgb(213 237 254);
  --search-outline: rgb(77 153 207);
  --line-numbers:#a2b0bc;
}

.cm-s-bstudio {
  background-color: transparent;
  color: var(--js-default);
  font-family: 'BSS Monospace', monospace;
  font-size: 13px;
  line-height:1.45;
}
.cm-s-bstudio .CodeMirror-gutters {
  background: transparent;
  color: red;
  border: none;
}
.cm-s-bstudio.CodeMirror pre > * { text-indent: 0px; }
.cm-s-bstudio .CodeMirror-guttermarker, .cm-s-bstudio .CodeMirror-guttermarker-subtle, .cm-s-bstudio .CodeMirror-linenumber { color: var(--line-numbers); }
.cm-s-bstudio .CodeMirror-cursor { border-left: 1px solid var(--cursor-color); }
.cm-s-bstudio div.CodeMirror-selected { background: var(--selection); }
.cm-s-bstudio.CodeMirror-focused div.CodeMirror-selected { background: var(--selection); }
.cm-s-bstudio ::selection, .cm-s-bstudio .CodeMirror-line::selection, .cm-s-bstudio .CodeMirror-line > span::selection, .cm-s-bstudio .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.16); }
.cm-s-bstudio ::-moz-selection, .cm-s-bstudio .CodeMirror-line::-moz-selection, .cm-s-bstudio .CodeMirror-line > span::-moz-selection, .cm-s-bstudio .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.16); }

.cm-s-bstudio .CodeMirror-scrollbar-filler { background-color: #1D2022;}

.cm-s-bstudio .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
.cm-s-bstudio .cm-keyword { color: var(--js-keyword); }
.cm-s-bstudio .cm-operator { color: var(--cm-operator); }
.cm-s-bstudio .cm-variable-2 { color: inherit; }
.cm-s-bstudio .cm-variable-3 { color: inherit; }
.cm-s-bstudio .cm-builtin { color: #ffb60c; }
.cm-s-bstudio .cm-atom { color: var(--cm-atom); }
.cm-s-bstudio .cm-number { color: var(--js-string); }
.cm-s-bstudio .cm-def { color: inherit; }
.cm-s-bstudio .cm-string { color: var(--js-string); }
.cm-s-bstudio .cm-string-2 { color: var(--js-string); }
.cm-s-bstudio .cm-comment { color: var(--js-comment); }
.cm-s-bstudio .cm-variable { color: inherit; }
.cm-s-bstudio .cm-tag { color: inherit; }
.cm-s-bstudio .cm-meta { color: #80CBC4; }
.cm-s-bstudio .cm-attribute { color: var(--js-string); }
.cm-s-bstudio .cm-property { color: inherit; }
.cm-s-bstudio .cm-qualifier { color: var(--cm-qualifier); }
.cm-s-bstudio .cm-variable-3 { color: inherit; }

/* HTML customizations */

.cm-s-bstudio .cm-m-xml.cm-string {
  color: var(--pink);
}

.cm-s-bstudio .cm-m-xml.cm-attribute {
  color: var(--html-attribute);
}

.cm-s-bstudio .cm-m-xml.cm-tag {
  color: var(--html-tag-color);
}

/*.cm-s-bstudio .cm-tag { color: rgba(255, 83, 112, 1); }*/
.cm-s-bstudio .cm-error {
  color: #fff !important;
  background-color: #EC5F67;
}
.cm-s-bstudio .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: var(--text-color) !important;
}

.cm-s-bstudio .CodeMirror-linenumber {
    padding: 0 10px 0 5px;
}

.cm-s-bstudio.CodeMirror {
  height: 100%;
}

.cm-s-bstudio .cm-searching {
  box-shadow: 0 0 0 1px var(--search-outline);
  background: none !important;
}

/* SASS Customizations */

.cm-s-bstudio .cm-m-css.cm-variable{
  color: var(--js-string);
}

.cm-s-bstudio .cm-m-css.cm-variable-2{
  color: #3fd454;
}

.cm-s-bstudio .cm-m-css.cm-def,
.cm-s-bstudio .cm-m-css.cm-property{
  color: var(--js-keyword);
}

.cm-s-bstudio .cm-m-css.cm-atom,
.cm-s-bstudio .cm-m-css.cm-variable-3{
  color: var(--pink);
}

/* Code Folding */

.cm-s-bstudio .CodeMirror-foldmarker {
  color: #0060A7;
  font-family: sans-serif;
  line-height: .2;
  cursor: default;
  background-color: white;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #ACD5F3 inset;
  margin-left:3px;
  margin-right:3px;
}

.cm-s-bstudio .CodeMirror-foldgutter {
  width: .7em;
}

.cm-s-bstudio .CodeMirror-foldgutter-open,
.cm-s-bstudio .CodeMirror-foldgutter-folded {
    color: #777;
}

.cm-s-bstudio .CodeMirror-foldgutter-open:after {
  content: "\25BE";
  font-size: 20px;
  line-height: 16px;
  margin-left:-4px;
}

.cm-s-bstudio .CodeMirror-foldgutter-folded:after {
  content: "\25B8";
  font-size: 20px;
  line-height: 16px;
  margin-left:-4px;
}

/* Dialog css */

.CodeMirror-dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--editor-background);
  padding: 10px 14px;
  overflow: hidden;
  font: 13px/1.5 Arial, Helvetica, sans-serif;
  border-top: 8px solid var(--editor-background);
  z-index: 15;
}

.CodeMirror-dialog input {
  border: none;
  outline: none;
  background: var(--input-background);
  width: 30% !important;
  color: var(--text-color);
  padding: 3px 5px;
  font: inherit;
  line-height: 1;
  margin: 0 10px;
}

/* Search buttons. Copied from button dark gray. 
  Todo: make it uses the proper buttons in the future; */

.CodeMirror-dialog button {
  display: inline-block;
  border: none;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  position: relative;
  outline: none;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(#676d71, #565c5f);
  opacity: 0.9;
  font-size: 10px;
  padding: 6px 10px;
  margin-right: 1px;
  border-radius: 2px;
}

.CodeMirror-dialog button:first-child {
  margin-left: 10px;
}

.CodeMirror-dialog button:hover{
  opacity: 1;
}

.CodeMirror-dialog button:active{
  bottom:-1px;
  opacity:0.8 !important;
}

/* Search/replace styles */

.ace_search {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 12px;
}
.ace_search_form, .ace_replace_form {
  display: flex;
  margin-top: 6px;
}
.ace_searchbtn,
.ace_replacebtn {
  background: #fff;
  border: 0 none;
  border-left: 1px solid #dcdcdc;
  cursor: pointer;
  float: left;
  height: 22px;
  padding: 0 5px;
  position: relative;
}
.ace_replacebtn {
  margin-right: 3px;
}