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

    @each $name, $value in $iftypes {
        &.--iftype-#{$name} .__port {
            background: $value !important;
        }
    }

    .__port {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        top: calc(50% - 5px);
        cursor: crosshair;
    }

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

        .__port {
            left: -1.1em;
        }

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

        .__port {
            right: -1.1em;
        }

    }

}