.#{$upload} {
  --upload-item-gap: #{size(map.get($conf_upload, 'item-gap'))};
  --upload-radius: #{size(map.get($conf_upload, 'radius'))};
  --upload-icon-size: #{size(map.get($conf_upload, 'icon-size'))};
  --upload-thumb-size: #{size(map.get($conf_upload, 'thumb-size'))};
  --upload-list-thumb-size: #{size(48px)};
  --upload-font-color: #{map.get($conf_upload, 'font-color')};
  --upload-font-color-hover: #{map.get($conf_upload, 'font-color-hover')};
  --upload-font-size: #{size(map.get($conf_upload, 'font-size'))};
  --upload-handle-bg-color: #{map.get($conf_upload, 'handle-bg-color')};
  --upload-handle-bg-color-hover: #{map.get($conf_upload, 'handle-bg-color-hover')};
  --upload-handle-border-color: #{map.get($conf_upload, 'handle-border-color')};
  --upload-handle-border-color-hover: #{map.get($conf_upload, 'handle-border-color-hover')};
  --upload-item-bg-color: #{map.get($conf_upload, 'item-bg-color')};
  --upload-item-bg-color-hover: #{map.get($conf_upload, 'item-bg-color-hover')};
  --upload-item-bg-color-mask: #{map.get($conf_upload, 'item-bg-color-mask')};
  --upload-item-border-color: #{map.get($conf_upload, 'item-border-color')};
  --upload-item-border-color-hover: #{map.get($conf_upload, 'item-border-color-hover')};
  --upload-item-padding-y: #{size(map.get($conf_upload, 'item-padding-y'))};
  --upload-item-padding-x: #{size(map.get($conf_upload, 'item-padding-x'))};
  --upload-dragger-width: 100%;
  --upload-dragger-height: #{size(180px)};
  --upload-dragger-icon: calc(var(--upload-dragger-height) / 6);
  display: inline-block;
  .upload-input {
    display: none;
  }
  &.is-drag {
    display: flex;
    flex-direction: column;
    .handle-text {
      display: flex;
      flex-grow: 1;
    }
  }

  iframe {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0;
  }

  .handle-text {
    display: inline-flex;
    vertical-align: middle;
    font-size: var(--upload-font-size);
    cursor: pointer;
    @include transition(all var(--duration) var(--timing));
  }

  .handle-card {
    display: inline-flex;
    background-color:var(--upload-handle-bg-color);
    border: var(--border-width) dashed var(--upload-handle-border-color);
    border-radius: var(--upload-radius);
    width: var(--upload-thumb-size);
    height: var(--upload-thumb-size);
    cursor: pointer;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    @include transition(all var(--duration) var(--timing));
    &:hover,
    &:focus {
      color: var(--upload-font-color-hover);
      border-color: var(--upload-handle-border-color-hover);
      background-color: var(--upload-handle-bg-color-hover);
    }
  }

  .upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: var(--upload-item-gap);
    &:empty {
      margin-top: 0;
    }
    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: size(16px);
      padding: var(--upload-item-padding-y) var(--upload-item-padding-x);
      color: var(--upload-font-color);
      font-size: var(--upload-font-size);
      border-radius: var(--upload-radius);
      border: var(--border-width) solid var(--upload-item-border-color);
      background-color: var(--upload-item-bg-color);
      @include transition(all var(--duration) var(--timing));
      overflow: hidden;

      &:not(:last-child) {
        margin-bottom: var(--upload-item-gap);
      }

      &.is-uploading {
        .item-content {
          margin-right: unset;
        }
        .item-status {
          display: none;
        }
      }
      
      .file-icon {
        flex-shrink: 0;
        flex-grow: unset;
        width: var(--upload-icon-size);
        height: var(--upload-icon-size);
        margin-right: calc(var(--upload-icon-size) - 4px);
      }

      .item-content {
        flex-grow: 1;
        width: 100%;
        margin-right: calc(var(--upload-icon-size) - 4px);
      }

      .item-name {
        font-size: var(--upload-font-size);
        color: var(--text-regular);
        width: 100%;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        padding-right: size(30px);
      }

      .item-status {
        position: relative;
        display: flex;
        height: size(24px);
        min-width: size(24px);
        align-items: center;
        justify-content: center;
        .icon-status,
        .icon-close {
          position: absolute;
          z-index: 4;
          visibility: hidden;
          opacity: 0;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: size(var(--form-icon-size));
          height: size(var(--form-icon-size));
          @include transition(all var(--duration) var(--timing));
        }

        .icon-close {
          transform: translate(0, 50%);
        }
        .icon-status {
          transform: translate(0, 0);
        }

        .icon-loading {
          color: var(--primary);
          min-width: size(24px);
          height: size(24px);
          padding: size(4px);
        }
      }

      .#{$progress_title} {
        .progress-number {
          color: var(--primary);
          transform: translate(0, -100%);
        }
      }
    }

    // 文本列表样式
    &.list-picture,
    &.list-text {
      .item {
        &.is-success {
          .item-status {
            .icon-loading {
              display: none;
            }

            .icon-status {
              visibility: visible;
              opacity: 1;
            }

            .icon-close {
              visibility: hidden;
              opacity: 0;
            }
          }

          &:hover {
            background-color: var(--upload-item-bg-color-hover);
            border-color: var(--upload-item-border-color-hover);

            .item-status {
              .icon-status {
                opacity: 0;
                visibility: hidden;
                transform: translate(0, -50%);
              }

              .icon-close {
                opacity: 1;
                visibility: visible;
                transform: translate(0, 0);
              }
            }
          }
        }
        &.is-ready,
        &.is-fail {
          .item-status {
            .icon-loading {
              display: none;
            }

            .icon-status,
            .icon-close {
              visibility: hidden;
              opacity: 0;
            }
          }
          &:hover {
            background-color: var(--upload-item-bg-color-hover);
            border-color: var(--upload-item-border-color-hover);

            .item-status {
              .icon-close {
                opacity: 1;
                visibility: visible;
                transform: translate(0, 0);
              }
            }
          }
        }

        .#{$progress} {
          margin-top: size(4px);
          --progress-height: #{size(4px)};
          .progress-content {
            position: absolute;
            width: 100%;
            top: size(-4px);
            right: 0;
            transform: translate(0, -100%);
          }
        }
      }
    }

    // 卡片样式
    &.list-card {
      margin: 0;
      display: inline;
      .item {
        display: flex;
        float: left;
        width: var(--upload-thumb-size);
        height: var(--upload-thumb-size);
        padding: 0;
        border: none;
        margin-right: var(--upload-item-gap);
        margin-bottom: var(--upload-item-gap);
        div {
          width: 100%;
          height: 100%;
        }

        .#{$icon} {
          display: none;
        }

        .item-content {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: size(0 20%);
          background-color: var(--upload-item-bg-color-mask);

          .item-name {
            display: none;
          }
        }

        .item-status {
          display: none;
        }

        .#{$progress} {
          .progress-circle {
            .progress-circle-path {
              stroke: #fff;
            }
            .progress-circle-track {
              stroke: rgba(#fff, 0.3);
            }
          }
          .progress-content {
            .progress-percentage {
              color: var(--text-inverse);
              font-size: var(--font-sm);
            }
          }
        }

        .item-thumb {
          display: block;
          max-width: 100%;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .item-actions {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          cursor: default;
          color: var(--text-inverse);
          opacity: 0;
          background-color: var(--upload-item-bg-color-mask);
          @include transition(opacity var(--duration) var(--timing));
          span {
            display: none;
            cursor: pointer;
            text-align: center;
          }
          .#{$icon} {
            display: block;
            width: calc(var(--upload-thumb-size) / 6);
            height: calc(var(--upload-thumb-size) / 6);
            max-width: size(map.get($conf_icon_size, 'xxl', 'size'));
            max-height: size(map.get($conf_icon_size, 'xxl', 'size'));
          }
        }

        &.is-success {
          .item-actions {
            &:hover {
              opacity: 1;

              span {
                display: inline-block;
              }
            }
          }
        }

        &.is-ready {
          .item-actions {
            &:hover {
              opacity: 1;

              span {
                display: inline-block;
              }
            }
          }
        }
      }
    }

    // 缩略图样式
    &.list-picture {
      .item {
        .item-thumb {
          border-radius: var(--upload-radius);
          flex-shrink: 0;
          flex-grow: unset;
          width: var(--upload-list-thumb-size);
          height: var(--upload-list-thumb-size);
          margin-right: size(12px);
        }

        .file-icon {
          display: none;
        }
      }
    }
  }

  .upload-dragger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--upload-radius);
    width: var(--upload-dragger-width);
    height: var(--upload-dragger-height);
    border: var(--border-width) dashed var(--upload-handle-border-color);
    background-color: var(--upload-handle-bg-color);
    @include transition(all var(--duration) var(--timing));
    .#{$icon} {
      width: var(--upload-dragger-icon);
      height: var(--upload-dragger-icon);
      max-width: size(32px);
      max-height: size(32px);
      min-width: size(16px);
      min-height: size(16px);
    }
    &:hover {
      border-color: var(--upload-handle-border-color-hover);
      background-color: var(--upload-handle-bg-color-hover);
    }
    &.is-dragover {
      border-color: var(--upload-handle-border-color-hover);
      background-color: var(--upload-handle-bg-color-hover);
    }
  }
}