


.connection_container
{
    .connection_line, .connection_end
    {
        transition: stroke-opacity 0.5s linear, fill-opacity 0.5s linear;
    }

    &.connection_type_relation_link .connection_line
    {
        stroke-dasharray: 2 10;
        &.hovered
        {
            stroke-dasharray: none;
        }
    }

    &.connection_type_judgement .connection_line,
    &.connection_type_objective .connection_line
    {
        stroke-dasharray: 10 10;
        &.hovered
        {
            stroke-dasharray: none;
        }
    }

    &.negative_connection_effect .connection_line
    {
        stroke: orangered;
    }
    &.negative_connection_effect .connection_end
    {
        fill: orangered;
    }

    &.no_connection_effect .connection_line,
    &.no_connection_effect .connection_end
    {
        stroke: #aaa;
    }
}



.animate_connections
{
    .connection_type_causal_link
    {
        .connection_line, .connection_line_background
        {
            stroke-dasharray: 120 10;
            stroke-dashoffset: 10;
            animation: animate_dash 2s infinite linear;
        }
    }

    .connection_type_relation_link
    {
        .connection_line
        {
            stroke-dasharray: 2 10;
            stroke-dashoffset: 10;
            animation: animate_dash 5s infinite linear;
            &.hovered
            {
                stroke-dasharray: none;
            }
        }
    }
}

@keyframes animate_dash {
    from {
        stroke-dashoffset: 10;
    }
    to {
        stroke-dashoffset: -120;
    }
}
