/** Mermaid Diagrams
 * Custom styling for flowcharts, sequence diagrams, and other Mermaid visualizations
 */
.mermaid {
    --mermaid-red-color:               var(--code-color-red);
    --mermaid-orange-color:            var(--code-color-orange);
    --mermaid-yellow-color:            var(--code-color-yellow);
    --mermaid-green-color:             var(--code-color-green);
    --mermaid-blue-color:              var(--code-color-blue);
    --mermaid-purple-color:            var(--code-color-purple);
    --mermaid-pink-color:              var(--code-color-pink);

    --mermaid-terminator-color:         var(--mermaid-red-color);
    --mermaid-func-call-color:          var(--mermaid-orange-color);
    --mermaid-join-color:               var(--mermaid-yellow-color);
    --mermaid-decision-color:           var(--mermaid-green-color);
    --mermaid-node-color:               var(--mermaid-blue-color);
    --mermaid-in-out-color:             var(--mermaid-purple-color);
    --mermaid-data-color:               var(--mermaid-pink-color);

    --mermaid-terminator-back-color:    color-mix(in srgb, var(--mermaid-terminator-color), var(--color-mono-min) 80%);
    --mermaid-func-call-back-color:     color-mix(in srgb, var(--mermaid-func-call-color),  var(--color-mono-min) 80%);
    --mermaid-join-back-color:          color-mix(in srgb, var(--mermaid-join-color),       var(--color-mono-min) 80%);
    --mermaid-decision-back-color:      color-mix(in srgb, var(--mermaid-decision-color),   var(--color-mono-min) 80%);
    --mermaid-node-back-color:          color-mix(in srgb, var(--mermaid-node-color),       var(--color-mono-min) 80%);
    --mermaid-in-out-back-color:        color-mix(in srgb, var(--mermaid-in-out-color),     var(--color-mono-min) 80%);
    --mermaid-data-back-color:          color-mix(in srgb, var(--mermaid-data-color),       var(--color-mono-min) 80%);

    --mermaid-node-text-color:          var(--color-text);

    --mermaid-line-color:               var(--color-mono-6);
    --mermaid-label-text-color:         var(--mermaid-join-color);
    --mermaid-label-back-color:         var(--color-bg);

    --mermaid-group-back-color:         var(--color-mono-1);
    --mermaid-group-color:              var(--color-mono-2);
    --mermaid-group-text-color:         var(--color-mono-6);

    --mermaid-seq-man-color:            var(--mermaid-blue-color);
    --mermaid-seq-request-color:        var(--mermaid-yellow-color);
    --mermaid-seq-response-color:       var(--mermaid-green-color);

    --mermaid-seq-man-back-color:       color-mix(in srgb, var(--mermaid-seq-man-color),    var(--color-mono-min) 80%);

    --mermaid-tone-color--light:        var(--color-attention);
    --mermaid-tone-color--dark:         #111;

    --mermaid-line-width--normal:       2;
    --mermaid-line-width--thick:        3;

    /* SVG container */
    svg {
        display: block;
        margin: var(--margin-block) auto;
    }


    /* Error icons */
    .error-icon {
        fill: var(--mermaid-tone-color--light);
    }

    .error-text {
        fill: var(--mermaid-tone-color--dark);
        stroke: var(--mermaid-tone-color--dark);
    }

    /* Markers */
    .marker {
        fill: var(--node-back);
        stroke: var(--node-back);

        &.cross {
            stroke: var(--node-back);
        }

        path {
            stroke-width: var(--mermaid-line-width--normal) !important;
        }
    }

    /* Flowchart nodes */
    .node {
        /* Default node styling */
        rect,
        circle,
        ellipse,
        polygon,
        path {
            fill: var(--mermaid-node-back-color) !important;
            stroke: var(--mermaid-node-color) !important;
            stroke-width: var(--mermaid-line-width--thick) !important;
        }

        /* Process blocks */
        rect {
            fill: var(--mermaid-node-back-color) !important;
            stroke: var(--mermaid-node-color) !important;
        }

        /* Terminators (start/end) */
        .outer-path path {
            fill: var(--mermaid-terminator-back-color) !important;
            stroke: var(--mermaid-terminator-color) !important;
        }

        /* Decisions */
        polygon {
            fill: var(--mermaid-decision-back-color) !important;
            stroke: var(--mermaid-decision-color) !important;

            /* Function calls */
            &.label-container[points^="0,0"] {
                fill: var(--mermaid-func-call-back-color) !important;
                stroke: var(--mermaid-func-call-color) !important;
            }

            /* Input/output */
            &[points^="-"] {
                fill: var(--mermaid-in-out-back-color) !important;
                stroke: var(--mermaid-in-out-color) !important;
            }
        }

        /* Join points */
        circle {
            fill: transparent !important;
            stroke: var(--mermaid-join-color) !important;

            &:last-of-type {
                fill: var(--mermaid-join-back-color) !important;
            }
        }

        /* Database */
        path {
            fill: var(--mermaid-data-back-color) !important;
            stroke: var(--mermaid-data-color) !important;
        }

        /* FSA invisible start */
        &.start {
            display: none;
        }

        /* Text labels */
        .label {
            text-align: center;
        }

        &.clickable {
            cursor: pointer;
        }
    }

    /* Terminators (older Mermaid versions) */
    [id^="flowchart-start"] rect,
    [id^="flowchart-done"] rect {
        fill: var(--mermaid-terminator-back-color) !important;
        stroke: var(--mermaid-terminator-color) !important;
    }

    /* Labels */
    .label {
        font-family: var(--mermaid-font-family);

        text,
        span {
            fill: var(--mermaid-node-text-color) !important;
            color: var(--mermaid-node-text-color) !important;
        }
    }

    span {
        fill: var(--mermaid-node-text-color) !important;
        color: var(--mermaid-node-text-color) !important;
    }

    /* Sequence diagrams */
    .actor-man :is(line, circle) {
        fill: var(--mermaid-seq-man-back-color) !important;
        stroke: var(--mermaid-seq-man-color) !important;
    }

    .actor-line {
        stroke: var(--mermaid-seq-man-color) !important;
        stroke-width: var(--mermaid-line-width--thick) !important;
    }

    .messageLine0 {
        stroke: var(--mermaid-seq-request-color) !important;
    }

    .messageText:has(+ .messageLine0) {
        fill: var(--mermaid-seq-request-color) !important;
    }

    .messageLine1 {
        stroke: var(--mermaid-seq-response-color) !important;
    }

    .messageText:has(+ .messageLine1) {
        fill: var(--mermaid-seq-response-color) !important;
    }

    /* Connection lines */
    .edgePath .path {
        stroke: var(--mermaid-line-color) !important;
        stroke-width: var(--mermaid-line-width--thick) !important;
    }

    .arrowheadPath {
        fill: var(--mermaid-line-color) !important;
    }

    .edge-thickness-normal { stroke-width: var(--mermaid-line-width--normal); }
    .edge-thickness-thick  { stroke-width: var(--mermaid-line-width--thick); }

    .edge-pattern-solid  { stroke-dasharray: 0; }
    .edge-pattern-dashed { stroke-dasharray: 3; }
    .edge-pattern-dotted { stroke-dasharray: 2; }

    .flowchart-link {
        stroke: var(--mermaid-line-color) !important;
        stroke-width: var(--mermaid-line-width--normal) !important;
        fill: none;
    }

    #flowchart-pointEnd {
        stroke: var(--mermaid-line-color) !important;
    }

    /* Edge labels */
    .edgeLabel {
        .labelBkg,
        .edgeLabel {
            background-color: transparent !important;
        }

        .edgeLabel > p {
            background-color: transparent !important;
            color: var(--mermaid-label-text-color);
            font-weight: 500;
            text-shadow:
                 0.1em  0.1em 0.1em var(--mermaid-label-back-color),
                 0.1em -0.1em 0.1em var(--mermaid-label-back-color),
                -0.1em  0.1em 0.1em var(--mermaid-label-back-color),
                -0.1em -0.1em 0.1em var(--mermaid-label-back-color);
        }
    }

    /* Groups */
    .cluster {
        rect {
            fill: var(--mermaid-group-back-color) !important;
            stroke: var(--mermaid-group-color) !important;
            stroke-width: var(--mermaid-line-width--normal) !important;
        }
    }

    .cluster-label text {
        fill: var(--mermaid-group-text-color) !important;
    }
}