.EasyMDEContainer {
    display: flex;
    flex-direction: column;
}

    .EasyMDEContainer .CodeMirror {
        color: var(--mud-palette-text-primary);
        font-family: monospace !important;
        font-size: var(--mud-typography-default-size);
        font-weight: var(--mud-typography-default-weight);
        line-height: var(--mud-typography-default-lineheight);
        letter-spacing: var(--mud-typography-default-letterspacing);
        text-transform: var(--mud-typography-default-text-transform);
        background-color: var(--mud-palette-background) !important;
        border-radius: var(--mud-default-borderradius);
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        padding: 8px;
        flex: 1; /* Fill available space */
        height: 100%; /* Required to propagate height */
    }

.editor-toolbar.fullscreen {
    width: 100%;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    background-color: var(--mud-palette-background) !important;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    position: fixed;
    top: var(--mud-appbar-height);
    left: 0;
    opacity: 1;
    z-index: 9;
}

.EasyMDEContainer .CodeMirror-fullscreen {
    height: calc(100vh - var(--mud-appbar-height)) !important;
}

/* Make CodeMirror cursor white */
.CodeMirror-cursor {
    border-left: 1px solid var(--mud-palette-text-primary) !important;
}

/* Gutter (line numbers) */
.cm-gutters {
    background-color: #1A1A27;
    color: #888;
    border-right: 1px solid #333;
}

/* Active line highlight */
.cm-activeLine {
    background-color: #2A2A3D;
}

/* Selection */
.cm-selectionBackground {
    background-color: #3A3A5A;
}

/* Matching brackets */
.cm-matchingBracket {
    background-color: #3C3C5C;
    color: #FFFFFF;
    font-weight: bold;
}

/* Keyword styling */
.cm-keyword {
    color: #82AAFF;
}

/* Strings */
.cm-string {
    color: #C3E88D;
}

/* Comments */
.cm-comment {
    color: #676E95;
    font-style: italic;
}

/* Functions */
.cm-variableName {
    color: #F07178;
}

.editor-preview {
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-default-size);
    font-weight: var(--mud-typography-default-weight);
    line-height: var(--mud-typography-default-lineheight);
    letter-spacing: var(--mud-typography-default-letterspacing);
    text-transform: var(--mud-typography-default-text-transform);
    background-color: var(--mud-palette-background) !important;
    flex: 1; /* Fill available space */
}

.blog-editor {
    display: flex;
    flex-direction: column;
}