.droparea
{
    [data-bs-theme="dark"] &
    {
        background: rgba(0, 0, 0, 0.1);
    }

    border: 4px dotted var(--bs-body-color);
    border-radius: var(--bs-border-radius-xl);
    user-select: none;

    transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;

    &[data-drop_accept=true], [data-drop_accept=true] > &
    {
        cursor: alias;
        border-color: var(--bs-success);
    }

    &[data-drop_accept=false], [data-drop_accept=false] > &
    {
        cursor: no-drop;
        border-color: var(--bs-danger);
    }
}

.draggable
{
    cursor: move;
    user-select: none;
}

.hide-dragged.dragging 
{
    display: none!important;
}

.drag_ghost-root
{
    position: fixed;
    z-index: 1;
    pointer-events: none!important;

    * {
        pointer-events: none!important;
    }
}

.drop-tooltip
{
    margin-left: 15px;
    z-index: 2;
    pointer-events: none;
    color: var(--bs-body-color);
}