
$handle_width:1em;

.wcomponent_canvas_node .handles
{
    user-select: none;
    position: absolute;
    top: 0; right: auto; bottom: auto; left: -24px;
    font-size: $handle_width;
    width: 25px; // I do not understand how this works but it makes it slightly wider
    // background:rgba(255, 255, 255, 0.7)

    // This does not work on Firefox, also blurs the square grid background
    // The aim is so that when there are two nodes, with node A being positioned by default under node B
    // and node A having a knowledge view but node B not having a knowledge view, then currently whilst
    // in edit mode, the magnifying glass is shown from node A, but it's not obvious that clicking this
    // will actually create a new knowledge view for node B.
    // It would be preferable to have a CSS solution for this but I suspect it will always be sub optimal
    // and a much more complex solution in code will be needed to only shown the node handles when their
    // corresponding node is visible and positioned on the top
    // backdrop-filter: blur(2px);
}


.node_handle
{
    color: rgba(0,0,0,0.3);
    min-width: $handle_width * 1.5;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;

    &.error_disabled
    {
        color: rgba(200,0,0,0.3);
        cursor: not-allowed;
    }
}
.node_handle.highlight_on_hover:hover
{
    color: rgba(0,0,0,1);
}


.node_handle.movement
{
    font-size: 21px;
    cursor: move;
}

.node_handle.explore
{
    &.hidden
    {
        opacity: 0;
        pointer-events: none;
    }

    &.has_knowledge_view
    {
        color: black; /* Can not colour unicode characters */
    }

    &.current_but_no_parent
    {
        color: pink;

        &:hover
        {
            color: red;
        }
    }

    &.will_create_on_click
    {
        color: rgb(177, 209, 255);
        fill: currentColor;
        stroke: currentColor;
    }
}

.node_handle.overlapping_nodes
{
    &.hidden
    {
        opacity: 0;
        pointer-events: none;
    }
}
