/* Jodit Plugin: Mermaid – Editor-Vorschau für <pre class="mermaid">-Blöcke */

.jodit-wysiwyg pre.mermaid {
    background: var(--oo-primary-lighter) !important;
    border: 1px solid var(--oo-primary-light) !important;
    border-left: 4px solid var(--oo-primary) !important;
    border-radius: var(--oo-radius-md) !important;
    padding: 10px 12px 12px 12px !important;
    font-family: 'Courier New', monospace !important;
    font-size: var(--oo-font-size-sm) !important;
    color: #1e3a5f !important;
    white-space: pre-wrap !important;
    margin: 1rem 0 !important;
}

.jodit-wysiwyg pre.mermaid::before {
    content: "Mermaid-Diagramm";
    display: block;
    font-size: var(--oo-font-size-xs);
    font-family: sans-serif;
    font-weight: bold;
    color: var(--oo-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}