.module-graph {
    position: relative;
    display: flex;
    flex-direction: column;

    .react-flow-bridge {
        flex: 1;
    }

    .i-actions {
        position: absolute;
        top: 1em;
        left: 1em;
    }

    .react-flow__connection-path {
        stroke: var(--P-graph-connection);
        stroke-width: 2px;
    }

    .react-flow__handle {
        --color: unset;
        background: var(--color);
        border-color: var(--P-graph-connection);

        &::before {
            /* increase hitbox */
            /* interaction signifier */
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
        }
    }

    .i-connection {
        .react-flow__edge-path {
            stroke: var(--P-graph-connection);
            stroke-width: 2px;
            stroke-linecap: round;
        }

        &.selected .react-flow__edge-path,
        &.is-highlighted .react-flow__edge-path {
            stroke: var(--P-graph-connection-highlighted);
            stroke-width: 4px;
        }
    }

    &:not(.is-dragging-node) {
        .react-flow__node {
            transition: transform 0.3s;
        }
        .react-flow__edge-path {
            transition: d 0.3s;
        }
    }

    .i-module-item {
        background: var(--P-graph-node-bg);
        --shading: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3);
        --conn-port-in: rgb(var(--P-color-accent));
        --conn-port-out: rgb(var(--P-color-accent));
        --selected: rgb(var(--P-color-accent));
        box-shadow: var(--shading);
        border-radius: 0.5em;
        cursor: default;

        &.is-selected {
            background: var(--P-graph-node-selected-bg);
            box-shadow: var(--shading), 0 0 0 2px var(--selected);
        }

        &.is-error {
            --selected: var(--P-error);
            --conn-port-out: var(--P-error);

            .i-header {
                background: var(--P-error);
                color: var(--P-error-content-fg);
            }
        }

        .i-header {
            height: calc(var(--height) * 1px);
            line-height: calc(var(--height) * 1px);
            border-radius: 0.5em 0.5em 0 0;
            padding: 0 0.2em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .i-index {
                font-weight: bold;
                display: inline-block;
                min-width: 1em;
                text-align: right;
                margin-right: 0.2em;
            }
        }
        .i-input,
        .i-output {
            height: calc(var(--height) * 1px);
            line-height: calc(var(--height) * 1px);
            white-space: nowrap;
            font-size: smaller;
            padding: 0 0.5em;
            position: relative;
            display: flex;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -0.5em;
                border: 0.5em solid transparent;
                border-left-color: var(--conn-port-in);
            }

            .i-label {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .react-flow__handle {
                --color: var(--conn-port-in);
            }
        }

        .i-input {
            padding-left: 0.7em;
        }

        .i-output {
            justify-content: flex-end;
            padding-right: 0.7em;

            &::before {
                left: auto;
                right: 0;
                border-left-color: transparent;
                border-right-color: var(--conn-port-out);
            }

            .react-flow__handle {
                --color: var(--conn-port-out);
            }
        }

        .i-named-inputs {
            box-shadow: inset 0 1px var(--P-separator);

            .i-named-input {
                height: calc(var(--height) * 1px);
                line-height: calc(var(--height) * 1px);
                font-size: smaller;
                white-space: nowrap;
                padding: 0 0.5em;
                padding-left: 0.7em;
                position: relative;
                display: flex;

                .i-label {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -0.5em;
                    border: 0.5em solid transparent;
                    border-left-color: var(--conn-port-in);
                }

                .react-flow__handle {
                    --color: var(--conn-port-in);
                }
            }
        }
    }

    .i-output-node {
        cursor: grab;

        &.is-patting {
            cursor: grabbing;
        }

        .eggbug-containment-zone {
            width: 48px;
            height: 48px;
            transform-origin: 50% 90%;

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }
}
