@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;
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-uploader {
    &-list {
      &-item {
        &-container {
          @{arco-dark-mode-selector} & {
            .use-var(background-color, dark-uploader-item-background-color);
          }
        }
        &-file {
          &-icon {
            @{arco-dark-mode-selector} & {
              .use-var(color, dark-uploader-file-icon-color);
            }
          }
        }
        &-text {
          @{arco-dark-mode-selector} & {
            .use-var(color, dark-uploader-item-text-color);
          }
          &-error {
            @{arco-dark-mode-selector} & {
              .use-var(color, dark-uploader-item-text-error-color);
            }
          }
        }
        &-loaded {
          @{arco-dark-mode-selector} & {
            .use-var(color, dark-uploader-loaded-icon-color);
          }
        }
        &-error {
          @{arco-dark-mode-selector} & {
            .use-var(color, dark-uploader-error-text-color);
          }
        }
        &-delete {
          &-icon {
            @{arco-dark-mode-selector} & {
              .use-var(color, dark-uploader-delete-icon-color);
            }
            &-disabled {
              @{arco-dark-mode-selector} & {
                .use-var(color, dark-uploader-disabled-delete-icon-color);
              }
            }
          }
        }
      }
    }
  }
}
/********************* End *************************/