:root {
    --EDITOR_MIN_HEIGHT: 200px;
    --EDITOR_FONT_SIZE: 15px;
    --EDITOR_LINE_HEIGHT: calc(var(--EDITOR_FONT_SIZE) * 1.6);
    --EDITOR_FG_COLOR: black;
    --EDITOR_SETTINGS_FG_COLOR: gray;
    --EDITOR_CURSOR_BG_COLOR: black;
    --EDITOR_CURSOR_FG_COLOR: white;
    --EDITOR_CODE_COUNTER_BORDER: blue;
}

@media (prefers-color-scheme: dark) {
    :root {
	--EDITOR_FG_COLOR: orange;
	--EDITOR_SETTINGS_FG_COLOR: #CC5511;
	--EDITOR_CURSOR_BG_COLOR: orange;
	--EDITOR_CURSOR_FG_COLOR: black;
	--EDITOR_CODE_COUNTER_BORDER: orange;
   }
}

.code_editor_wrapper {
    font-family: monospace;
    height: var(--EDITOR_MIN_HEIGHT);
    display: flex;
    flex-direction: column;
    justify-items: space-around;
}

.code_editor_subwrapper {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.code_editor_settings_info {
    padding: 10px 0px;
    color: var(--EDITOR_SETTINGS_FG_COLOR);
    flex-basis: min-content;
}

.code_editor_common {
    font-family: monospace;
    font-size: var(--EDITOR_FONT_SIZE);
    line-height: var(--EDITOR_LINE_HEIGHT);
    border: 0px;
    padding: 0px;
    padding-bottom: 15px;
    margin: 0px;
    height: 100%;
    width: 100%;
    white-space: pre;
    resize: none;
    counter-reset: code_line 0;
}

.code_editor_visible {
    color: var(--EDITOR_FG_COLOR);
    z-index: 0;
    overflow: scroll;
}

.code_editor_hidden {
    z-index: 1;
    overflow: scroll;
    color: transparent;
    background: transparent;
    caret-color: transparent;
    padding-left: 47px;
    border: 0px;
    outline: none;
    position: absolute;
    top: 0px;
    left: 0px;
}

.code_cursor {
    background: var(--EDITOR_CURSOR_BG_COLOR);
    color: var(--EDITOR_CURSOR_FG_COLOR);
}

.code_line {
    height: var(--EDITOR_LINE_HEIGHT);
}

.code_line::before {
    counter-increment: code_line;
    content: counter(code_line);
    display: inline-block;
    width: 35px;
    font-size: calc(var(--EDITOR_FONT_SIZE) - 2px);
    line-height: var(--EDITOR_LINE_HEIGHT);
    border-right: 2px solid var(--EDITOR_CODE_COUNTER_BORDER);
    margin-right: 10px;
}