cm.css

/*
  Name:       material
  Author:     Mattia Astorino (http://github.com/equinusocio)
  Website:    https://material-theme.site/
*/

.CodeMirror {
  @apply h-auto;
  background-color: inherit;
  color: inherit;
}

.CodeMirror-gutters .errors {
  /*@apply bg-white text-red-500;*/
  @apply w-6;
  background-color: inherit;
}

/*.CodeMirror-scroll {*/
  /*min-height: 40vh;*/
/*}*/

.cm-s-material.CodeMirror {
  /*background-color: #263238;*/
  @apply font-mono; /*py-8;*/
}

.cm-s-material .CodeMirror-gutters {
  /*@apply  text-gray-80;*/
  border: none;
  background-color: inherit;
  color: inherit;
}

/*.CodeMirror pre.CodeMirror-line,*/
/*.CodeMirror pre.CodeMirror-line-like {*/
/*}*/

.cm-s-material .CodeMirror-guttermarker,
.cm-s-material .CodeMirror-guttermarker-subtle,
.cm-s-material .CodeMirror-linenumber {
  @apply text-gray-80;
}

.cm-s-material .CodeMirror-cursor {
  border-left: 1px solid #FFCC00;
}

.cm-s-material div.CodeMirror-selected {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-line::selection,
.cm-s-material .CodeMirror-line>span::selection,
.cm-s-material .CodeMirror-line>span>span::selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-line::-moz-selection,
.cm-s-material .CodeMirror-line>span::-moz-selection,
.cm-s-material .CodeMirror-line>span>span::-moz-selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.5);
}

.cm-s-material .cm-keyword {
  @apply text-berry-dark-50;
}

.cm-s-material .cm-keyword2 {
  @apply text-water-dark;
}

.cm-s-material .cm-variant-constructor {
  @apply text-orange-dark;
}

.cm-s-material .cm-module {
  @apply text-water-dark;
}

.cm-s-material .cm-operator {
  @apply text-berry-dark-50;
}

.cm-s-material .cm-variable-2 {
  color: #EEFFFF;
}

.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
  color: #f07178;
}

.cm-s-material .cm-builtin {
  @apply text-orange-dark;
}

.cm-s-material .cm-decorator {
  @apply text-water-dark;
}

.cm-s-material .cm-type-annotation {
  @apply text-gray-40;
}

.cm-s-material .cm-atom {
  @apply text-orange-dark;
}

.cm-s-material .cm-number {
  @apply text-turtle-dark;
}

.cm-s-material .cm-def {
  @apply text-gray-30;
}

.cm-s-material .cm-string {
  @apply text-turtle-dark;
}

.cm-s-material .cm-string-2 {
  @apply text-turtle-dark;
}

.cm-s-material .cm-comment {
  @apply text-gray-60;
}

.cm-s-material .cm-variable {
  @apply text-gray-30;
}

.cm-s-material .cm-tag {
  color: #FF5370;
}

.cm-s-material .cm-meta {
  color: #FFCB6B;
}

.cm-s-material .cm-attribute {
  color: #C792EA;
}

.cm-s-material .cm-property {
  color: #C792EA;
}

.cm-s-material .cm-qualifier {
  color: #DECB6B;
}

.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
  color: #DECB6B;
}


.cm-s-material .cm-error {
  color: rgba(255, 255, 255, 1.0);
  background-color: #FF5370;
}

.cm-s-material .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}


/* simplescrollbars style */
.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
  position: absolute;
  background: #ccc;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 2px;
}

.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
  position: absolute;
  z-index: 6;
  background: #eee;
}

.CodeMirror-simplescroll-horizontal {
  bottom: 0; left: 0;
  height: 8px;
}
.CodeMirror-simplescroll-horizontal div {
  bottom: 0;
  height: 100%;
}

.CodeMirror-simplescroll-vertical {
  right: 0; top: 0;
  width: 8px;
}
.CodeMirror-simplescroll-vertical div {
  right: 0;
  width: 100%;
}


.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler {
  display: none;
}

.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
  position: absolute;
  background: #bcd;
  border-radius: 3px;
}

.CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical {
  position: absolute;
  z-index: 6;
}

.CodeMirror-overlayscroll-horizontal {
  bottom: 0; left: 0;
  height: 6px;
}
.CodeMirror-overlayscroll-horizontal div {
  bottom: 0;
  height: 100%;
}

.CodeMirror-overlayscroll-vertical {
  right: 0; top: 0;
  width: 6px;
}
.CodeMirror-overlayscroll-vertical div {
  right: 0;
  width: 100%;
}