@import '../common/variables';

.bcu-drag-drop-overlay {
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0.2;
}

.bcu-upload-state {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;

    svg {
        width: 130px;
        height: 130px;
        margin-bottom: 10px;
    }

    // Show blue indicator when item can be dropped
    &.bcu-is-droppable .bcu-drag-drop-overlay {
        display: block;
        background: $blue;
    }

    // Show red indicator when item cannot be dropped
    &.bcu-is-not-droppable .bcu-drag-drop-overlay {
        display: block;
        background: $red;
    }

    // Hide upload prompt if there are items queued
    &.bcu-has-items {
        display: none;

        // If a file is dragged over, show the prompt on top of items
        &.bcu-is-droppable,
        &.bcu-is-not-droppable {
            position: absolute;
            inset: 0;
            display: flex;
            background-color: rgb(255 255 255 / 80%);

            .bcu-drag-drop-overlay {
                display: none;
            }
        }
    }
}

.bcu-upload-input-container {
    .be-input-link {
        display: inline-block;
    }
}