
#graph_container
{
    height: 100%;
    flex-grow:1;
    flex-shrink:1;
    cursor: grab;
    overflow: hidden;

    &.squared_background
    {
        background-image:
            linear-gradient(to right, #EEE 1px, transparent 1px),
            linear-gradient(to bottom, #EEE 1px, transparent 1px);

        .big_squared_background
        {
            background-image:
                linear-gradient(to right, #e5e5e5 1px, transparent 1px),
                linear-gradient(to bottom, #e5e5e5 1px, transparent 1px);
            height: 100%;
            width: 100%;
            position: absolute;
            pointer-events: none;
        }
    }

    &.graph_background_pointer_down
    {
        cursor: grabbing;

        #graph_lowest_elements_container
        {
            pointer-events: none;
        }
    }
}

/* styles from here on are copies as-is because I don't fully know the scope/intent/etc */

#graph_visuals_container
{
    overflow: visible;
    position: relative;
    transform-origin: left top;
    // Set to 0 height and 0 width to prevent a subset of canvas area behaving differently than
    // other areas.  For example, the mouse events and dragging a selection box both behaved
    // strangely when height was 100%
    height: 0;
    width: 0;
}
#graph_container svg
{
    overflow: visible;
    pointer-events: none;
}

.visual
{
    position: absolute;
    width: 200px;
    cursor: pointer;
}


.node.mouseable
{
    cursor: pointer;
}
.node .node_main_content
{
    // padding: 5px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    border: thin solid #555;
    border-radius: 4px;
    // background-color: #FCFCFC;
}

.node.focused
{
    z-index: 100;
}
.highlighting_connection_lines .connection_line
{
    stroke: #BBB;
}
.highlighting_connection_lines .connection_end
{
    fill: #BBB;
}
