.component_editor{
    width: 100%;
    > div{

        #editor{
            height: 100%;
            flex: 1;
            display: flex;
            overflow: hidden;
            width: 100%;
        }
    }
}



.CodeMirror {
    width: 100%;
    height: 100%;
    color: #3b4045;
    background: var(--bg-color);
}

.CodeMirror-sizer{
    > div{
        padding-top: 4px;
        padding-bottom: 5px;
    }
}
.CodeMirror-scroll { -webkit-overflow-scrolling: touch; }

.CodeMirror-foldmarker{
    padding: 5px;
}

/* HIDE LINE NUMBERS ON MOBILE */
@media screen and (max-width: 400px) {
    .CodeMirror-sizer{ margin-left: 0!important; }
    .CodeMirror-gutters{ display: none; }
    .CodeMirror-gutter-wrapper{ display: none; }
}
.CodeMirror-linenumber{
    cursor: pointer;
}


/* SEARCH */
.CodeMirror-dialog {
	position: fixed;
	left: 0; right: 0;
	background: #525659;
	z-index: 15;
	padding: 5px .8em;
	overflow: hidden;
	color: #e2e2e2;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5)
}
.CodeMirror-dialog-top {
    border-bottom: 1px solid #eee;
    bottom: 0;
}

.CodeMirror-dialog-bottom {
    border-top: 1px solid #eee;
    bottom: 0;
}

.CodeMirror-dialog input {
    border: none;
    outline: none;
    background: transparent;
    width: 20em;
    color: white;
}

.CodeMirror-dialog button {
    font-size: 70%;
}

/* Font stuff */
.CodeMirror {
    font-size: 15px;
    font-family: 'Source Code Pro', monospace;
}
.cm-s-default .cm-header { font-size: 17px; }
.cm-s-default .cm-header.cm-level1{ font-size: 18px;}

@media only screen and (max-width: 600px) {
    .CodeMirror { font-size: 14px; }
    .cm-s-default .cm-header { font-size: 15px; }
    .cm-s-default .cm-header.cm-level1{ font-size: 16px;}
}

/* Make things more confy */
.CodeMirror{
    .CodeMirror-code{ line-height: 1.3em; }
    &[mode="orgmode"] .CodeMirror-code, &[mode="yaml-frontmatter"] .CodeMirror-code{
        line-height: 1.5em;
    }

}

/* Widget stuff */
.CodeMirror-linewidget{
    img{
        margin: 10px;
        height: 300px;
        max-width: 80%;
        text-align: center;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        background: var(--dark);
    }
}

/* Code Highlight Theme */
.cm-s-default .cm-header {
    color: #3E7AA6;
    line-height: 1em;
    font-weight: 600;
}
.cm-header.cm-level1{ color: #376e95; }
.cm-s-default .cm-keyword { color: var(--emphasis-secondary); }
.cm-s-default .cm-header.cm-org-level-star{
    color: #6f6f6f;
    vertical-align: baseline;
    display: inline-block;
    padding-left: 5px;
    margin-left: -5px;
    cursor: pointer;
}
.cm-s-default .cm-header.cm-org-todo{ color: #FF8355; font-weight: normal; cursor: pointer; }
.cm-s-default .cm-header.cm-org-done{ color: #3BB27C; font-weight: normal; cursor: pointer; }
.cm-s-default .cm-header.cm-org-priority{ cursor: pointer; font-weight: normal; }
.cm-s-default .cm-org-toggle{ cursor: pointer; }
.cm-s-default .cm-void {
    display: inline-block;
    max-width: 10px;
    overflow: hidden;
    white-space: nowrap;
}
.cm-s-default .cm-header.cm-comment{font-weight: normal; font-size: 0.9em!important; float: right; display: inline-block; color: var(--secondary);}
pre.CodeMirror-line{clear: right;}


.cm-s-default .cm-link{color: var(--secondary)}
.cm-s-default .cm-strong{color: var(--secondary)}
.cm-s-default .cm-org-url, .cm-s-default .cm-org-image{color: var(--secondary)!important; border-bottom: 1px dashed var(--light); cursor: pointer;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: var(--secondary);}
.cm-s-default .cm-string, .cm-s-default .cm-string-2{ color: #c41a16; }
.cm-s-default .cm-def { color: rgb(68, 85, 136); }

.CodeMirror-gutters{
    box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}

.CodeMirror-foldmarker{
    padding-left: 5px;
    color: var(--color);
    text-shadow: 1px 1px 10px var(--color);
}

span.CodeMirror-matchingbracket {color: #0f0;}
span.CodeMirror-nonmatchingbracket {color: #f22;}


/* BUGFIX */
// https://github.com/codemirror/CodeMirror/issues/5056
.CodeMirror-cursor {
	min-width: 1px !important;
}