@import 'codemirror/lib/codemirror.css';
@import 'variables';

/* Always make the CodeMirror box the max height of it's parent, and change the
 * font so it's nicer :) */

.CodeMirror {
  height: 100% !important;
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 17px;
  background: inherit;
  z-index: 1;
}

/* Gutters and line numbers now match our grays */

.CodeMirror-gutters {
  background: white;
  border: 0;
  color: var(--dark-gray);
  padding-right: 5px;
}

.CodeMirror-linenumber {
  background: white;
}

/* Makes the autocomplete hint dialog match our panels a bit better */

.CodeMirror-hints {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.03);
  border-color: var(--gray);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

li.CodeMirror-hint {
  padding: 2px 6px;
}

li.CodeMirror-hint-active {
  background-color: var(--lime);
}

/* Prettier lint errors */

.CodeMirror-lint-tooltip {
  font-family: var(--font-family-mono) !important;
  font-size: 11px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
  padding: 0 !important;
}
.CodeMirror-lint-message-error {
  background-image: none !important;
  background-color: var(--red);
  color: white;
  padding: 5px 10px !important;
  margin: 0 !important;
  font-weight: bold;
}
.CodeMirror-lint-marker-error {
  border: 1px solid yellow;
}

/* Custom YAML Editor Theme. Mostly copied the GitHub file viewer colors */

.cm-s-yaml {
  color: #3c3c3c !important;
}

.cm-s-yaml .cm-atom {
  color: #2465ad;
}

.cm-s-yaml .cm-string {
  color: #388a26;
}

.cm-s-yaml .cm-meta {
  color: #555;
}

.cm-s-yaml .cm-keyword, .cm-s-yaml .cm-number, .cm-s-yaml .cm-variable-2 {
  color: #ca1655;
}

.cm-s-yaml .cm-def, .cm-s-yaml .cm-comment {
  color: #999;
}

/* Custom GraphQL Editor Theme. These colors have been copied from the offical
 * GraphQL editor theme as seen here:
 * http://graphql.org/learn/queries/#fragments */

.cm-s-graphql .cm-property {
  color: #1F61A0;
}

.cm-s-graphql .cm-string {
  color: #D64292;
}

.cm-s-graphql .cm-keyword {
  color: #B11A04;
}

.cm-s-graphql .cm-attribute {
  color: #8B2BB9;
}

.cm-s-graphql .cm-variable {
  color: #397D13;
}

.cm-s-graphql .cm-punctuation {
  color: #555;
}

.cm-s-graphql .cm-punctuation.CodeMirror-matchingbracket {
  color: #555;
  text-decoration: underline;
}

.cm-s-graphql .cm-number {
  color: #2882F9;
}

.cm-s-graphql .cm-def {
  color: #D2054E;
}

.cm-s-graphql .cm-atom {
  color: #CA9800;
}

.cm-s-graphql .cm-comment {
  color: #999;
}

.cm-s-graphql .cm-qualifier {
  color: #1C92A9;
}

.cm-s-graphql .cm-string-2 {
  color: #0B7FC7;
}

.cm-s-graphql .cm-meta {
  color: #B33086;
}

.cm-tab {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 3px;
    bottom: 0;
    left: 3px;
    background-position: right center;
    background-repeat: no-repeat;

    /* URL encoded
    *
    * <svg xmlns="http://www.w3.org/2000/svg" width="47" height="5" viewBox="0 0 47 5">
    *   <path fill="#CCCCCC
    " fill-rule="evenodd" stroke="#979797" d="M43.9142136,3.91421356 L43.3535534,4.47487373 L44.0606602,4.47487373 L43.3535534,3.76776695 L43.3535534,4.47487373 L43.9142136,3.91421356 Z M43.9142136,3.91421356 L45.3284271,2.5 L4.02607362e-17,2.5 L0.5,3 L0.5,2 L0,2.5 L45.5,2.5 L45.4267767,2.4267767 L45.5,2.5 L45.517767,2.5 L45.3284271,2.5 L43.9142136,3.91421356 Z M45.4267767,2.4267767 L43.3535534,0.353553391 L43.3535534,1.06066017 L44.0606602,0.353553391 L43.3535534,0.353553391 L45.4267767,2.4267767 Z M46.25,2.5 L46.5,2.5 L46.5,0 L46,0.5 L47,0.5 L46.5,0 L46.5,4 L46.5,2.5 L46.25,2.5 Z M46.5,4 L46.5,5 L47,4.5 L46,4.5 L46.5,5 L46.5,4 Z"/>
    * </svg>
    *
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='5' viewBox='0 0 47 5'%3E%3Cpath fill='%23BBB' fill-rule='evenodd' d='M45.5355339,3 L43.7071068,4.82842712 L43,4.12132034 L44.1213203,3 L0,3 L0,2 L44.2928932,2 L43,0.707106781 L43.7071068,4.15223411e-14 L45.7071068,2 L46,2 L46,0 L47,0 L47,5 L46,5 L46,3 L45.5355339,3 Z'/%3E%3C/svg%3E%0A");
  }
}
