.baklava-node-interface {
    padding: 0.25em 0;
    position: relative;

    .__port {
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--baklava-node-interface-port-color);
        border-radius: 50%;
        top: calc(50% - 5px);
        cursor: crosshair;

        &.--selected {
            outline: 2px var(--baklava-color-connection-default) solid;
            outline-offset: 4px;
        }
    }

    &.--input {
        text-align: left;
        padding-left: 0.5em;

        .__port {
            left: -1.1em;
        }
    }
    &.--output {
        text-align: right;
        padding-right: 0.5em;

        .__port {
            right: -1.1em;
        }
    }

    .__tooltip {
        position: absolute;
        left: 5px;
        top: 15px;
        transform: translate(-50%, 0%);
        background: var(--baklava-node-interface-port-tooltip-color-background);
        color: var(--baklava-node-interface-port-tooltip-color-foreground);
        padding: 0.25em 0.5em;
        text-align: center;
        z-index: 2;
    }
}
