.CodeMirror {
  @apply h-auto rounded-lg border border-gray-300 bg-white !text-gray-900 transition hover:bg-gray-100;

  /*
    Bound :has() invalidation. CM mutates inner DOM per keystroke; without
    containment, every mutation re-evaluates every :has() rule whose
    subject is on CM's ancestor chain. `size` is the load-bearing keyword
    (CM has explicit height, so it's free).
  */
  contain: layout style paint size !important;
}

.CodeMirror-code {
  @apply focus-visible:ring-offset-0 focus-visible:ring-0;
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  @apply bg-white;
}

.CodeMirror-gutters {
  @apply border-e-gray-300 bg-gray-50;
}

.CodeMirror-linenumber {
  @apply !text-gray-500;
}

.CodeMirror-guttermarker {
  @apply text-gray-900;
}

.CodeMirror-guttermarker-subtle {
  @apply text-gray-500;
}

.CodeMirror-cursor {
  @apply border-s-[2px] border-s-primary-600;
}

.CodeMirror div.CodeMirror-secondarycursor {
  @apply border-s-gray-200;
}

.cm-fat-cursor .CodeMirror-cursor {
  @apply bg-success-200;
}

.cm-fat-cursor-mark {
  @apply bg-success-50;
}

.cm-animate-fat-cursor {
  @apply bg-success-200;
}

.CodeMirror-ruler {
  @apply border-s-gray-200;
}

.cm-s-default .cm-header {
  @apply !text-primary-500;
}

.cm-s-default .cm-quote {
  @apply !text-success-500;
}

.cm-negative {
  @apply !text-error-500;
}

.cm-positive {
  @apply !text-success-500;
}

.cm-s-default .cm-keyword {
  @apply !text-purple-500;
}

.cm-s-default .cm-atom {
  @apply !text-primary-500;
}

.cm-s-default .cm-number {
  @apply !text-success-500;
}

.cm-s-default .cm-def {
  @apply !text-primary-500;
}

.cm-s-default .cm-variable-2 {
  @apply !text-primary-500;
}

.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
  @apply !text-success-500;
}

.cm-s-default .cm-comment {
  @apply !text-warning-500;
}

.cm-s-default .cm-string {
  @apply !text-error-500;
}

.cm-s-default .cm-string-2 {
  @apply !text-warning-500;
}

.cm-s-default .cm-meta {
  @apply !text-gray-500;
}

.cm-s-default .cm-qualifier {
  @apply !text-gray-500;
}

.cm-s-default .cm-builtin {
  @apply !text-primary-500;
}

.cm-s-default .cm-bracket {
  @apply !text-gray-500;
}

.cm-s-default .cm-tag {
  @apply !text-success-500;
}

.cm-s-default .cm-attribute {
  @apply !text-primary-500;
}

.cm-s-default .cm-hr {
  @apply !text-gray-500;
}

.cm-s-default .cm-link {
  @apply !text-primary-500;
}

.cm-s-default .cm-error {
  @apply !text-error-500;
}

.cm-invalidchar {
  @apply !text-error-500;
}

div.CodeMirror span.CodeMirror-matchingbracket {
  @apply !text-success-500;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  @apply !text-error-500;
}

.CodeMirror-matchingtag {
  @apply !bg-warning-500;
}

.CodeMirror-activeline-background {
  @apply !bg-gray-50;
}

.CodeMirror pre.CodeMirror-placeholder {
  @apply -mb-5 !h-auto italic !text-gray-500;
}
