@import '../../node_modules/codemirror/lib/codemirror.css';
@import '../../node_modules/prismjs/themes/prism.css';

@mixin code() {
  background-color: var(--color-primary-fade);
  color: var(--color-black-text);
  font-family: var(--font-monospace);
  height: auto;
  border-radius: var(--radius-default);
  word-break: break-word;
  width: 100%;
  overflow-y: auto;
  font-size: var(--text-s);
  line-height: calc(var(--text-s) + 4px);
  max-width: 100vw;

  @media #{$is-tablet-up} {
    max-width: calc(100vw - calc(var(--space-m) * 2));
    font-size: var(--text-m);
    line-height: calc(var(--text-m) + 8px);
  }
}

.CodeMirror.cm-s-noah,
.CodeMirror.cm-s-default {
  @include code();

  pre {
    font-size: inherit;
    line-height: inherit;
  }

  .emphasis {
    font-weight: bold;
  }

  .dotted {
    border-bottom: 1px dotted #cb4b16;
  }

  .CodeMirror-gutter {
    background-color: var(--color-grey-background);
    border-right: 1px solid var(--color-grey-border);
  }

  .CodeMirror-linenumber {
    color: var(--color-grey-text);
    font-size: 75%;
    line-height: var(--line-height);
  }

  .CodeMirror-cursor {
    border-left-color: #002b36 !important;
  }

  .CodeMirror-matchingbracket {
    color: #002b36;
    background-color: #eee8d5;
    box-shadow: 0 0 10px #eee8d5;
    font-weight: bold;
  }

  .CodeMirror-nonmatchingbracket {
    background-color: #eee8d5;
    box-shadow: 0 0 10px #eee8d5;
    font-weight: bold;
    color: #dc322f;
    border-bottom: 1px dotted #cb4b16;
  }
}

[class^='cm-'], [class*=' cm-'] {
  font-family: var(--font-monospace);
}

.cm-keyword, .token.keyword {
  color: #657b83;
  font-weight: bold;
}

.cm-atom {
  color: #2aa198;
}

.cm-number, .token.number {
  color: #586e75;
}

.cm-def {
  color: #268bd2;
}

.cm-variable {
  color: #cb4b16;
}

.cm-variable-2 {
  color: #cb4b16;
}

.cm-variable-3 {
  color: #cb4b16;
}

.cm-comment {
  color: #93a1a1;
}

.cm-property, .token.function {
  color: #b58900;
}

.cm-operator {
  color: #657b83;
}

.cm-string, .token.string {
  color: #6c71c4;
}

.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}

.cm-bracket {
  color: #cb4b16;
}

.cm-tag {
  color: #657b83;
}

.cm-attribute {
  color: #586e75;
  font-weight: bold;
}

.cm-meta {
  color: #268bd2;
}

div[class*="language-"] {
  @include code;
  position: relative;
}

div[class*="language-"] .highlight-lines {
  user-select: none;
  padding-top: 1.1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: inherit;
  z-index: 2;
}

div[class*="language-"] .highlight-lines .highlighted {
  background-color: rgba(0, 0, 0, 0.1);
}

div[class*="language-"] pre,
div[class*="language-"] pre[class*="language-"] {
  @include code;
  margin: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}