/*
** CodeMirror
**
** NOTE: This was blindly copied from another project and is being updated piecemeal as
**       needed while working through the Acuranzo implementation. As such there are
**       many variables and elements that aren't part of Acuranzo but have been left
**       as placeholders or reminders of things to review when getting to the different
**       areas where CodeMirror is being used.
*/

div.CodeMirror {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--ACZ-font-family-mono);
  color: var(--ACZ-color-input);
  font-size: var(--ACZ-font-size-1);
}

pre.CodeMirror-line {
  margin-bottom: 1px;
  font-family: var(--ACZ-font-family-mono) !important;
  font-size: var(--ACZ-font-size-1) !important;
}

div.CodeMirror-measure,
div.CodeMirror-cursors
{
  height: 0px;
  visibility: hidden;
}

.cm-s-custom.CodeMirror { background: none; color: var(--ACZ-color-input); }
.cm-s-custom div.CodeMirror-selected { background: var(--ACZ-color-0) !important; }
.cm-s-custom .CodeMirror-line::-moz-selection, .cm-s-custom .CodeMirror-line > span::-moz-selection, .cm-s-custom .CodeMirror-line > span > span::-moz-selection { background: var(--ACZ-color-1) !important; }
.cm-s-custom .CodeMirror-line::selection, .cm-s-custom .CodeMirror-line > span::selection, .cm-s-custom .CodeMirror-line > span > span::selection { background: var(--ACZ-color-1) !important; }

.cm-s-custom .cm-keyword      {color: var(--ACZ-font-color-keyword);     }
.cm-s-custom .cm-atom         {color: var(--ACZ-font-color-atom);        }
.cm-s-custom .cm-number       {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-def          {color: var(--ACZ-font-color-def);         }
.cm-s-custom .cm-variable     {color: var(--ACZ-font-color-variable);    }
.cm-s-custom .cm-variable-2   {color: var(--ACZ-font-color-variable-2);  }
.cm-s-custom .cm-operator     {color: var(--ACZ-font-color-operator);    }
.cm-s-custom .cm-comment      {color: var(--ACZ-font-color-comment);     }
.cm-s-custom .cm-string       {color: var(--ACZ-font-color-string);      }
.cm-s-custom .cm-string-2     {color: var(--ACZ-font-color-string-2);    }
.cm-s-custom .cm-meta         {color: var(--ACZ-font-color-meta);        }
.cm-s-custom .cm-builtin      {color: var(--ACZ-font-color-builtin);     }
.cm-s-custom .cm-tag          {color: var(--ACZ-font-color-tag);         }
.cm-s-custom .cm-attribute    {color: var(--ACZ-font-color-attribute);   }
.cm-s-custom .cm-header       {color: var(--ACZ-font-color-header);      }
.cm-s-custom .cm-hr           {color: var(--ACZ-font-color-hr);          }
.cm-s-custom .cm-link         {color: var(--ACZ-font-color-link);        }
.cm-s-custom .cm-error        {color: var(--ACZ-font-color-error);       }
.cm-s-custom .cm-bracket      {color: var(--ACZ-font-color-bracket);     }
.cm-s-custom .cm-punctuation  {color: var(--ACZ-font-color-punctuation); }

.cm-s-custom .cm-datetime           {color: var(--ACZ-font-color-variable);    }
.cm-s-custom .cm-date               {color: var(--ACZ-font-color-variable);    }
.cm-s-custom .cm-time               {color: var(--ACZ-font-color-variable);    }
.cm-s-custom .cm-url                {color: var(--ACZ-font-color-variable-2);  }
.cm-s-custom .cm-size               {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-version            {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-number-with-commas {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-duration           {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-nice-duration      {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-bracketed-content  {color: var(--ACZ-font-color-number);      }
.cm-s-custom .cm-ip-address         {color: var(--ACZ-font-color-number);      }


.cm-s-custom .CodeMirror-activeline-background { background: #3C3636; }
.cm-s-custom .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }


/* CodeMirror Scrollbars */
div.CodeMirror-scroll {
  height: 100%;
  overflow: auto;
}
div.CodeMirror-scroll::-webkit-scrollbar {
  display: none;
}
div.CodeMirror-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.CodeMirror-overlayscroll-horizontal {
  width: 100% !important;
  height: var(--ACZ-scroll-width-2) !important;
  background: var(--ACZ-color-17);
  position: absolute;

  z-index: 6;
  bottom: 0;
  left: 0;
  right: 0px;
}

.CodeMirror-overlayscroll-vertical {
  width: var(--ACZ-scroll-width-2);;
  height: 100% !important;
  background: var(--ACZ-color-17);
  position: absolute;

  z-index: 6;
  bottom: 0;
  right: 0;
  top: 0;
}

.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler,
.CodeMirror-overlayscroll .CodeMirror-gutter-filler {
  background: var(--ACZ-scroll-color-thumb);
  border: none !important;
  border-radius: 0px;
}

.CodeMirror-overlayscroll-horizontal div {
  position: absolute;
  height: 100%;
  background: var(--ACZ-scroll-color-thumb);
  border-radius: var(--ACZ-scroll-radius-2);
  border: var(--ACZ-margin-1) solid var(--ACZ-color-17);
  cursor: e-resize;
}

.CodeMirror-overlayscroll-vertical div {
  position: absolute;
  width: 100%;
  background: var(--ACZ-scroll-color-thumb);
  border-radius: var(--ACZ-scroll-radius-2);
  border: var(--ACZ-margin-1) solid var(--ACZ-color-17);
  cursor: n-resize;
}
.CodeMirror-overlayscroll-horizontal div:hover,
.CodeMirror-overlayscroll-vertical div:hover {
  background: var(--ACZ-scroll-color-hover);
}


/* Gutters and Line Numbers */
.CodeMirror-gutters {
  border-right: 0;
  border-radius: var(--ACZ-border-radius-3);
  background: var(--ACZ-color-4) !important;
}
.CodeMirror-linenumber {
  padding: 0 3px 0 3px;
  min-width: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ACZ-color-11) !important;
}

/* Wrappers for CodeMirror editor intefaces */
.CMEditor-1 {
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-2);
/*background: var(--ACZ-color-4);*/
  padding: var(--ACZ-margin-1) !important;
}
.CMEditor-1 > div {
  border: var(--ACZ-border-1);
  padding: 0px !important;
  border-radius: var(--ACZ-border-radius-3);
  background: var(--ACZ-color-3) !important;
}
.CMEditor-2 {
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-2);
  background: var(--ACZ-color-4);
  padding: var(--ACZ-margin-1) !important;
  overflow: hidden;
}
.CMEditor-2 > div {
  border: none;
  border-radius: var(--ACZ-border-radius-3);
  background: var(--ACZ-color-7) !important;
  padding: 0px !important;
  overflow: hidden;
}