.connection {
    stroke: $color-connection-default;
    stroke-width: 2px;
    fill: none;

    &.--temporary {
        stroke-width: 4px;
        stroke-dasharray: 5 5;
        stroke-dashoffset: 0;
        animation: dash 1s linear infinite;
        transform: translateY(-1px);
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 20;
        }
    }

    &.--allowed {
        stroke: $color-connection-allowed;
    }

    &.--forbidden {
        stroke: $color-connection-forbidden;
    }

}