/**
 * CodeMirror Editor Styling
 * Syntax highlighting and theme integration for CodeMirror instances
 */

.CodeMirror span {
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: none !important;

    /* Syntax highlighting tokens */
    &.cm-meta       { color: var(--code-color-yellow)         !important; }
    &.cm-number     { color: var(--code-hl-number-color)      !important; }
    &.cm-keyword    { color: var(--code-hl-keyword-color)     !important; }
    &.cm-def        { color: var(--code-hl-function-color)    !important; }
    &.cm-variable   { color: var(--code-hl-variable-color)    !important; }
    &.cm-variable-2 { color: var(--code-hl-variable-color)    !important; }
    &.cm-variable-3 { color: var(--code-hl-variable-color)    !important; }
    &.cm-type       { color: var(--code-hl-type-color)        !important; }
    &.cm-property   { color: var(--code-hl-property-color)    !important; }
    &.cm-operator   { color: var(--code-hl-operator-color)    !important; }
    &.cm-string     { color: var(--code-hl-string-color)      !important; }
    &.cm-string-2   { color: var(--code-hl-string-color)      !important; }
    &.cm-comment    { color: var(--code-hl-comment-color)     !important; }
    &.cm-link       { color: var(--code-hl-url-color)         !important; }
    &.cm-atom       { color: var(--code-hl-constant-color)    !important; }
    &.cm-error      { color: var(--code-hl-important-color)   !important; }
    &.cm-tag        { color: var(--code-hl-tag-color)         !important; }
    &.cm-attribute  { color: var(--code-hl-property-color)    !important; }
    &.cm-qualifier  { color: var(--code-color-orange)         !important; }
    &.cm-bracket    { color: var(--code-hl-punctuation-color) !important; }
    &.cm-builtin    { color: var(--code-hl-keyword-color)     !important; }
    &.cm-special    { color: var(--code-color-orange)         !important; }
    &.cm-callee     { color: var(--code-color-cyan)           !important; }

    /* Error highlighting with underline */
    &.cm-error {
        background-color: transparent !important;
        text-decoration: underline !important;
        text-decoration-color: var(--code-error-color) !important;
    }

    /* Search and match highlighting */
    &.cm-matchhighlight,
    &.cm-searching {
        color: var(--code-color-normal) !important;
        background-color: var(--code-matching-back) !important;
    }
}

/* CodeMirror container styling */
.markdown-section .CodeMirror {
    font-size: var(--code-font-size) !important;
    font-family: var(--code-font-family) !important;
    line-height: var(--code-line-height) !important;
    background-color: var(--code-bg-color) !important;
    color: var(--code-fg-color) !important;
    margin-bottom: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;

    /* Cursor styling */
    .CodeMirror-cursor {
        border-color: var(--code-fg-color) !important;
        border-left-width: 2px !important;
    }

    /* Selection background */
    .CodeMirror-selected {
        background-color: var(--code-selection-back) !important;
    }

    /* Matching tags/brackets */
    .CodeMirror-matchingtag,
    .CodeMirror-matchingbracket {
        background-color: transparent !important;
    }

    .CodeMirror-focused .CodeMirror-matchingtag,
    .CodeMirror-focused .CodeMirror-matchingbracket {
        color: var(--code-matching-color) !important;
        font-weight: bold !important;
    }

    .CodeMirror-nonmatchingtag,
    .CodeMirror-nonmatchingbracket {
        color: var(--code-error-color) !important;
        font-weight: bold !important;
    }

    /* Active line highlighting */
    .CodeMirror-activeline-background {
        background-color: transparent !important;
    }

    &.CodeMirror-focused .CodeMirror-activeline-gutter,
    &.CodeMirror-focused .CodeMirror-activeline-background {
        background-color: var(--code-active-line-back) !important;
    }

    /* Autocomplete tooltips */
    .CodeMirror-hints {
        font-family: var(--code-font-family);
        border-color: var(--code-border-color) !important;
        color: var(--code-popup-color) !important;
        background-color: var(--code-popup-back-color) !important;

        li.CodeMirror-hint-active {
            color: var(--code-popup-color) !important;
            background-color: var(--code-popup-active-color) !important;
            font-weight: bold !important;
        }
    }

    /* Line numbers and gutters */
    .CodeMirror-gutters {
        background: var(--md-code-bg-color) !important;
        border-right: 1px solid var(--md-border-color) !important;
    }

    .CodeMirror-guttermarker        { color: var(--code-color-yellow) !important; }
    .CodeMirror-guttermarker-subtle { color: var(--code-color-normal) !important; }

    .CodeMirror-linenumber {
        padding-right: 6px !important;
        color: var(--code-color-muted) !important;
        text-align: right !important;
    }

    /* Error/warning markers in gutter */
    .ERRORgutter,
    .WARNINGgutter {
        margin-top: 0.4em;
        border-radius: 50%;
        cursor: help;
    }

    .WARNINGgutter { background-color: var(--code-warning-color); }
    .ERRORgutter   { background-color: var(--code-error-color); }

    /* Error/warning markings in code */
    .cm__WARNING   { border-bottom: 2px dotted var(--code-warning-color); }
    .cm__ERROR     { border-bottom: 2px dotted var(--code-error-color); }

    /* Code lines */
    .CodeMirror-lines {
        padding: 0 0 0.1em !important;

        &:last-of-type {
            padding-bottom: 0.5em !important;
        }
    }

    pre.CodeMirror-line,
    pre.CodeMirror-line-like {
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "calt" 0;
    }
}


/* Editor focus highlighting */
:is(.code-area, .codapi-runner):has(.CodeMirror) {
    border: 2px solid transparent;

    &:has(.CodeMirror-focused) {
        border-color: var(--theme-color) !important;
    }
}