textarea.editor {
    opacity: 0;
}

.CodeMirror {
    height: auto;
    padding: 0 1em;
    margin-top: 1em;
    border-left: 2px solid var(--color-cm-border);
    background-color: var(--color-cm-background);
    font-size: 1em;
    line-height: normal;
}

.CodeMirror-cursors,
.CodeMirror pre {
    z-index: 1 !important;
}

.CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection { 
    /* a selection within an IDE not just covers the background but
    also changes the text color, allowing e.g. for inversion.
    This is not possible via CodeMirror, see 
    https://github.com/codemirror/codemirror5/issues/1212#issuecomment-13047835
    */
    background-color:  var(--color-cm-selection) !important;
    opacity: 20% !important;
}

@keyframes text-flash {
    0% { 
        background: rgba(0, 0, 0, 0);
        color: black;
    }
    40% { 
        background: var(--color-cm-evaluated); 
        color: black,
    }
    100% { 
        background: rgba(0, 0, 0, 0); 
        color: black;
    }
}

.CodeMirror .text-flash {
    animation: text-flash .35s ease-in;
}

/* syntax hightlighting */
/* keyword can be "var" which is like the class color in the IDE */
.cm-s-default .cm-keyword { color: var(--color-cm-class); font-weight: bold; }
.cm-s-default .cm-built-in { color: var(--color-cm-built-in); }
.cm-s-default .cm-number { color: var(--color-cm-number); }
.cm-s-default .cm-symbol { color: var(--color-cm-symbol); }
.cm-s-default .cm-class { color: var(--color-cm-class); }
.cm-s-default .cm-primitive { color: var(--color-cm-primitive); }
.cm-s-default .cm-char { color: var(--color-cm-char); }
.cm-s-default .cm-env-var { color: var(--color-cm-env-var); }
/* used to be red */
.cm-s-default .cm-comment { color: var(--color-cm-comment); }
.cm-s-default .cm-string { color: var(--color-cm-string); }
.cm-s-default .cm-text { color: var(--color-cm-text); }

@media print {
    /* legacy colors */
    .cm-s-default .cm-keyword { color: #0000e6; font-weight: bold; }
    .cm-s-default .cm-built-in { color: #3333bf; font-weight: bold; }
    .cm-s-default .cm-number { color: #980099; }
    .cm-s-default .cm-symbol { color: #007300; }
    .cm-s-default .cm-class { color: #0000d2; font-weight: bold; }
    .cm-s-default .cm-primitive { color: #0000d2; }
    .cm-s-default .cm-char { color: #007300; }
    .cm-s-default .cm-env-var { color: #8c4614; }
    .cm-s-default .cm-comment { color: #bf0000; font-style: italic; }
    .cm-s-default .cm-string { color: #5f5f5f; }
    .cm-s-default .cm-text { color: #000000; }
}