
.cm-editor {
    color: #ddd;
    background-color: #333;
    line-height: 1.5;
    font-family: 'Operator Mono', 'Source Code Pro', Menlo, Monaco, Consolas, Courier New, monospace;
    max-height: calc(100vh - 2*4em - 5em);

    .cm-content {
        caret-color: orange;
    }

    .cm-comment {
        font-style: italic;
        color: #676B79;
    }

    .cm-operator {
        color: #f3f3f3;
    }

    .cm-string {
        color: #19F9D8;
    }

    .cm-string-2 {
        color: #FFB86C;
    }

    .cm-tag {
        color: #ff2c6d;
    }

    .cm-meta {
        color: #b084eb;
    }

    &.cm-focused .cm-cursor {
        border-left-color: orange;
    }

    &.cm-focused .cm-selectionBackground,
    ::selection {
        background-color: orange;
    }

    &.ͼ3.cm-focused .cm-scroller .cm-selectionLayer .cm-selectionBackground {
        background-color: #99eeff33;
    }

    .cm-gutters {
        background-color: #292a2b;
        color: #ddd;
        border: none;
    }

    .cm-scroller {
        overflow: auto;
    }

    /* Highlight Tags */
    .tok-comment {
        color: #7F848E;
    }

    .tok-variableName {
        color: #61AFEF;
    }

    .tok-operator {
        color: #56B6C2;
    }

    .tok-string {
        color: #98C379;
    }

    .tok-punctuation {
        color: #fff;
    }

    .tok-number {
        color: #E5C07B,
    }

    .tok-keyword {
        color: #C678DD,
    }

    .tok-propertyName {
        color: #D19A66;
    }

    .tok-atom,
    .tok-bool {
        color: #E06C75;
    }
}
