@import './globals.scss';

.DragDropArea{

    ul,
    ul li{
        margin: 0;
        padding:0;
        list-style: none;
    }

    .area{
        width: 100%;
    }

    .area-box{
        margin: 10px;
        border-radius: $border-radius;
        border:1px solid $border-color;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .area-title,
    .area-data{
        box-sizing: border-box;
        padding: 5px;
    }

    .area-single-entry{
        user-select: none;
    }

    .area-ul{
        width: 100%;
        height: 100%;
    }

    .dragging-target{
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        box-sizing: border-box;
        padding:10px;
        border-radius: $border-radius;
        border: 2px dashed $border-color;
    }

    .dragging-disabled{
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        box-sizing: border-box;
        padding:10px;
        border-radius: $border-radius;
        background-color: $border-color;
    }

    .drop-loading{
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 3;
        box-sizing: border-box;
    }
}