@import '../../../style/mixin.less';

.@{prefix}-uploader {
    &-container {
        display: flex;
        flex-wrap: wrap;
    }
    &-add {
        position: relative;
        input {
            position: absolute;
            opacity: 0;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
    }
    &-list {
        width: 100%;
        &-item {
            display: flex;
            align-items: center;
            .use-var(height, uploader-item-height);
            .use-var(margin-top, uploader-item-margin-top);
            &-container {
                flex: 1;
                display: flex;
                align-items: center;
                height: 100%;
                .use-var(border-radius, uploader-item-border-radius);
                .use-var(background-color, uploader-item-background-color);
                .use-var(padding, uploader-item-padding);
            }
            &-wrapper {
                display: flex;
                flex: 1;
                align-items: center;
            }
            &-file {
                display: flex;
                .use-var(font-size, uploader-file-icon-font-size);
                .use-var-with-rtl(margin-right, uploader-file-icon-margin-right);
                &-icon {
                    .use-var(color, uploader-file-icon-color);
                }
            }
            &-text {
                font-weight: 400;
                .use-var(font-size, uploader-item-text-font-size);
                .use-var(color, uploader-item-text-color);
                &-error {
                    .use-var(color, uploader-item-text-error-color);
                }
            }
            &-loaded {
                display: flex;
                .use-var(font-size, uploader-loaded-icon-font-size);
                .use-var(color, uploader-loaded-icon-color);
            }
            &-error {
                font-weight: 400;
                .use-var(font-size, uploader-error-text-font-size);
                .use-var(color, uploader-error-text-color);
            }
            &-delete {
                display: flex;
                height: 100%;
                align-items: center;
                .use-var-with-rtl(padding-left, uploader-delete-icon-padding-left);
                .use-var(font-size, uploader-delete-icon-font-size);
                &-icon {
                    .use-var(color, uploader-delete-icon-color);
                    &-disabled {
                        .use-var(color, uploader-disabled-delete-icon-color);
                    }
                }
            }
        }
    }
}

.@{prefix}-uploader-disabled {
    pointer-events: none;
}
