@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* _content/Feelerz.WebApp/Components/LCA/Diagram/FlowDiagram.razor.rz.scp.css */
[b-kaypu2hzmu] .diagram-port {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 9999px; /* full circle */
    background: #ffffff;
    border: 2px solid rgba(40, 70, 120, 0.35); /* primary w/ transparency */
    box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.08),
            0 0 0 2px rgba(40, 70, 120, 0.06) inset; /* subtle inner ring */
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
    cursor: crosshair;
}

/* Inner indicator dot for state/hover */
[b-kaypu2hzmu] .diagram-port::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 3px auto;
    border-radius: 9999px;
    background: #284678; /* primary */
    opacity: 0.25;
    transition: opacity 120ms ease;
}

/* Hover/focus states */
[b-kaypu2hzmu] .diagram-port:hover,
[b-kaypu2hzmu] .diagram-port:focus-visible {
    border-color: #284678; /* primary */
    box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.12),
            0 0 0 3px rgba(40, 70, 120, 0.12) inset; /* thicker inner ring */
    transform: scale(1.08);
}

[b-kaypu2hzmu] .diagram-port:hover::after,
[b-kaypu2hzmu] .diagram-port:focus-visible::after {
    opacity: 0.9;
}

/* Active/connecting helper class (if applied by host) */
[b-kaypu2hzmu] .diagram-port.active,
[b-kaypu2hzmu] .diagram-port.connected {
    border-color: #287774; /* secondary */
}

/* Top-aligned port */
[b-kaypu2hzmu] .diagram-port.top {
    top: -12px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bottom-aligned port */
[b-kaypu2hzmu] .diagram-port.bottom {
    bottom: -12px;
    left: 50%;
    transform: translate(-50%, 50%);
}

/* Left-aligned port */
[b-kaypu2hzmu] .diagram-port.left {
    left: -12px;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Right-aligned port */
[b-kaypu2hzmu] .diagram-port.right {
    right: -12px;
    top: 50%;
    transform: translate(50%, -50%);
}

/* Compact tweaks for denser layouts */
@media (max-width: 640px) {
    [b-kaypu2hzmu] .diagram-port {
        width: 14px;
        height: 14px;
    }
    [b-kaypu2hzmu] .diagram-port::after {
        width: 5px;
        height: 5px;
        margin: 2.5px auto;
    }
}


/* Alignment/transform overrides using CSS variables to prevent hover layout shift */
[b-kaypu2hzmu] .diagram-port {
    --tx: 0; /* translate X (%) */
    --ty: 0; /* translate Y (%) */
    transform: translate(var(--tx), var(--ty));
}

[b-kaypu2hzmu] .diagram-port.top {
    --tx: -50%;
    --ty: -50%;
    transform: translate(var(--tx), var(--ty));
}

[b-kaypu2hzmu] .diagram-port.bottom {
    --tx: -50%;
    --ty: 50%;
    transform: translate(var(--tx), var(--ty));
}

[b-kaypu2hzmu] .diagram-port.left {
    --tx: -50%;
    --ty: -50%;
    transform: translate(var(--tx), var(--ty));
}

[b-kaypu2hzmu] .diagram-port.right {
    --tx: 50%;
    --ty: -50%;
    transform: translate(var(--tx), var(--ty));
}

[b-kaypu2hzmu] .diagram-port:hover,
[b-kaypu2hzmu] .diagram-port:focus-visible {
    transform: translate(var(--tx), var(--ty)) scale(1.08);
}