
.wcomponent_background_frame
{
    position: absolute;
    z-index: -100;
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    pointer-events: none;

    transition: top, left, width, height 1.0s linear;

    .editable_edge
    {
        pointer-events: initial;
        position: absolute;
        transition: background-color, box-shadow 0.2s linear;

        &:hover
        {
            background-color: rgba(150, 150, 255, 0.20);
            box-shadow: 0 0 10px 0 rgb(150 150 255 / 40%);
        }
    }

    .editable_edge_bottom
    {
        cursor: row-resize;
        bottom: -5px;
        width: 100%;
        height: 10px;
    }

    .editable_edge_right
    {
        cursor: col-resize;
        right: -5px;
        height: 100%;
        width: 10px;
    }
}


.canvas_drag_event .wcomponent_background_frame
{
    transition: top, left, width, height 0s linear;
    .editable_edge
    {
        pointer-events: none;
    }
}
