.wcomponent_canvas_node.connectable_canvas_node.node
{
    transition: left 1.0s linear, top 1.0s linear, opacity 1.0s linear;

    &.node_is_moving
    {
        z-index: 100;
        transition: left 0.01s, top 0.01s;
    }

    .node_main_content
    {
        height: initial;
        min-height: 80px;
        text-align: center;
        text-overflow: initial;
        white-space: initial;
        overflow: initial;
        /* Attempt to allow opacity to transition smoothly */
        transition: background-color 1.0s, color 1.0s, box-shadow 0.2s, opacity 0.2s;
    }
}



.node_title
{
    font-size: 15px;
    min-height: 18px;
    display: block;
    font-weight: 500;
    overflow-wrap: break-word;
}

.node_validity_container, .node_state_container
{
    // This allows the value_and_prediction_summary to wrap onto a different line from the
    // node_judgements_container
    flex-wrap: wrap;

    display: flex;
    overflow: hidden;
    // border-top: thin solid #CCC;
    padding: 2px;
    width: 100%;
    max-width: 100%;
    align-items: center;
}
.node_sub_state_container
{
    display: flex;
    max-width: 100%;
    overflow: hidden;
}
.node_state_container, .node_sub_state_container
{
    .value_and_prediction_summary
    {
        // This is a complete hack to ensure that when there are one or two judgement badges, that
        // they get displayed to the left of this exapandable VAP set list but more than two and
        // this expandable VAP set list is moved underneath so it can be max width... even though it
        // appears from this hack that we're limiting it's width.
        // TODO: check this works accross browsers, and preferably, replace it with something more sane
        width: 70%;

        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
    }
}

// .color_light
// {
//     .node_validity_container, .node_state_container
//     {
//         border-top: thin solid #555;
//     }
// }
.color_light
{
    .description_icon
    {
        color: #cecece;
    }
}


.node_is_selected
{
    z-index: 97;
}

.node_is_current_item
{
    z-index: 98;
}

.node_is_highlighted
{
    z-index: 99;
}


//
.node_missing > .node_main_content
{
    background-color: #fafafa;
}

.node_is_type_action > .node_main_content
{
    box-shadow: inset orange 0px 0px 4px 2px;
    background-color: rgb(255, 238, 198);
}

.past_certain > .node_main_content
{
    background-color: rgb(62, 55, 90);
}

.past_uncertain > .node_main_content
{
    background-color: pink;
}

.node_is_type_goal > .node_main_content
, .node_is_type_judgement > .node_main_content
, .node_is_type_objective > .node_main_content
{
    box-shadow: inset #67c767 0px 0px 4px 2px;
    background-color: rgb(207, 255, 198);
}

.wcomponent_canvas_node.compact_title .node_main_content .node_title
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcomponent_canvas_node.node_on_foundational_kv .node_main_content
{
    border-color: lightblue;
}


.wcomponent_canvas_node .node_title, .wcomponent_canvas_node .node_main_content
{
    position: relative;
}
.wcomponent_canvas_node .background_image
{
    /* background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Wroclaw_Most_Mlynski_w_porannej_mgle_przed_switem.jpg/1280px-Wroclaw_Most_Mlynski_w_porannej_mgle_przed_switem.jpg); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.1;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Alternatively set mackground image z-index to 0 and all other elements in node to 1 with positive relative */
}

.wcomponent_canvas_node.node_is_type_actor .background_image
{
    background-image: url(https://www.leafstudio.co.uk/wp-content/uploads/2019/11/person-icon-silhouette-png-0.png);
}


.canvas_drag_event .wcomponent_canvas_node
{
    pointer-events: none;
}
