.UploadArea-legacy {
    border: 2px dashed var(--dividers-default);
    border-radius: 2px;
    outline: 0;

    &-drag-is-active {
        border-color: $blue;
        /* stylelint-disable-next-line color-function-notation */
        box-shadow: inset 0 0 50px 0 rgba($blue, 10%);
    }

    &-input {
        display: none;
    }
}

.UploadArea {
    &:not(.UploadArea-legacy) {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    &-dropzone {
        align-items: center;
        border: 1px dashed var(--fields-stroke-default);
        border-radius: var(--section-radius, var(--radius-medium));
        display: flex;
        gap: var(--padding-large);
        justify-content: center;
        padding: var(--padding-large);
        width: 100%;

        &:hover {
            background-color: var(--midnight-50);
            border-color: var(--fields-stroke-hover);
            cursor: pointer;
        }

        &-active {
            background-color: var(--midnight-50);
            border-color: var(--fields-stroke-focused);
        }

        &-disabled {
            border-color: var(--fields-stroke-disabled);

            &:hover {
                background-color: transparent;
                border-color: var(--fields-stroke-disabled);
                cursor: auto;
            }
        }
    }

    &-large {
        .UploadArea-dropzone {
            flex-direction: column;
            min-height: 294px;
        }
    }

    &-medium,
    &-small {
        .UploadArea-dropzone {
            justify-content: flex-start;
        }
    }

    &-error-message {
        @include text-body-small;

        color: var(--text-error);
        padding: var(--padding-small) 0;
    }

    &-status {
        align-self: end;
        display: flex;
        gap: var(--padding-medium-large);
        padding: var(--padding-medium-small) 0;

        &-popover {
            @include permanent-scrollbar;
            @include text-body;

            width: 476px;

            .GridTable-column {
                @include text-body-bold;
            }
        }
    }
}