/* Container for inline SVG diagrams. The SVGs themselves take their colors from the theme variables. */
.mxn-diagram {
    margin: 20px 0;
    overflow-x: auto;
}

.mxn-diagram.mxn-diagram-wide {
    max-width: none;
}

.mxn-diagram svg {
    display: block;
    min-width: 640px;
    cursor: zoom-in;
}

/* Zoomed diagram, see zoomDiagram() in mxn_theme.js. */
.mxn-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
    cursor: zoom-out;
    transition: background 300ms;
}

.mxn-zoom-overlay.open {
    background: var(--color-surface);
}

.mxn-zoom-clone {
    position: fixed;
    display: block;
    max-width: none;
    margin: 0;
    transition: left 300ms, top 300ms, width 300ms, height 300ms;
}