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

    .editor-toolbar {
        background-color: var(--bg3);
        border:1px solid var(--border);
        border-bottom: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        padding: 4px 8px;
        opacity: 1;

        button {
            color: var(--text2);
            border: none;

            &:hover {
                background-color: var(--bg2);
                color: var(--text)
            }
            .active {
                background-color: var(--bg2);
                color: var(--text);
            }
        }

        i.separator {
            border-left: 1px solid var(--border);
            margin: 0 4px;
        }
    }

    .CodeMirror {
        background-color: var(--bg2);
        color: var(--text);
        border: 1px solid var(--border) !important;

        &:focus-within {
            border-color: var(--rhpz-orange);
            outline: none;
        }
    }

    .CodeMirror-cursor {
        border-left: 2px solid var(--text2);
    }

    .CodeMirror-selected {
        background: color-mix(in srgb, var(--rhpz-orange-hover) 25%, transparent);
    }

    .cm-header {
        color: var(--rhpz-orange-hover);
        font-weight: 700;
    }

    .cm-strong {
        color: var(--text);
        font-weight: 700;
    }

    .cm-em {
        color: var(--text2);
        font-style: italic;
    }

    &.cm-link, &.cm-url {
        color: var(--rhpz-orange);
    }

    .cm-strikethrough, .cm-comment {
        color: var(--text2);
    }

    .editor-preview, .editor-preview-side {
        background: var(--bg2);
        color: var(--text);
    }

}