
@import './variables.scss';
@import '../upload/variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style

// 白灰主题通用样式

// 普通上传
.#{$css-prefix}upload {
  &.#{$css-prefix}grey:not(.#{$css-prefix}disabled) {
    .#{$css-prefix}upload-card {
      background: #fff;
      border-color: #fff;
    }

    .#{$css-prefix}upload-card:hover {
      border: $b-design-upload-drag-hover-border;
    }
  }

  &.#{$css-prefix}disabled {
    .#{$css-prefix}upload-card {
      background: $b-design-upload-disabled-color;
    }
  }
}

// 图片上传样式
.#{$css-prefix}upload-card {
  border-radius: $b-design-upload-card-border-radius;
  .#{$css-prefix}upload-text {
    margin-top: 4px;
  }
}

.#{$css-prefix}upload-list-card {
  .#{$css-prefix}upload-list-item-wrapper {
    border-radius: $b-design-upload-card-border-radius;
    overflow: hidden;
  }

  // 上传失败样式
  .#{$css-prefix}upload-list-item-error {
    .#{$css-prefix}upload-list-item-wrapper {
      border-color: $b-design-upload-error-color;

      // 上传失败图片和文字
      .#{$css-prefix}upload-list-item-handler {
        .#{$css-prefix}icon::before {
          content: '\E631';
          color: $b-design-upload-error-border-color;
          font-size: $s-5;
        }

        .#{$css-prefix}icon::after {
          content: '上传失败';
          position: absolute;
          color: $b-design-upload-error-border-color;
          top: 54px;
          right: 26px;
        }
      }
    }

    .#{$css-prefix}upload-list-item-wrapper:hover {
      border: 1px dotted $b-design-upload-error-border-color;
    }
  }

  // 正在上传样式
  .#{$css-prefix}upload-list-item-uploading {
    .#{$css-prefix}upload-list-item-handler {
      // icon和文字样式
      .#{$css-prefix}icon {
        display: none;
      }

      .#{$css-prefix}btn {
        position: absolute;
        top: 42px;
        left: 0;

        .#{$css-prefix}btn-helper {
          display: none;
        }
      }

      .#{$css-prefix}btn::before {
        content: '取消上传';
        font-size: $b-design-upload-font-size;
      }

      .#{$css-prefix}btn:hover {
        background-color: $b-design-upload-normal-color;
      }
    }

    // 进度题条样式
    .#{$css-prefix}progress-line-overlay {
      border-bottom-left-radius: $b-design-upload-border-radius-medium;
      border-top-right-radius: $b-design-upload-border-radius-small;
      border-bottom-right-radius: $b-design-upload-border-radius-small;
    }
  }

  // disabled状态
  .#{$css-prefix}disabled {
    .#{$css-prefix}upload-card {
      background-color: $b-design-upload-disabled-color;
    }
  }

  // 上传卡片hover阴影状态
  .#{$css-prefix}upload:not(.#{$css-prefix}disabled):hover {
    .#{$css-prefix}upload-inner {
      box-shadow: $b-design-upload-card-hover-box-shadow;
    }
  }
}

// 文字列表和图片列表 上传失败加icon
.#{$css-prefix}upload {
  .#{$css-prefix}upload-list-text,
  .#{$css-prefix}upload-list-image {
    .#{$css-prefix}upload-list-item-error::after {
      content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjMyOTA0ODM0NDEyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4MzAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUzNS44OTMzMzMgOTcyLjI4OGMtMjQ0LjczNiAwLTQ0My43MzMzMzMtMTk4Ljk5NzMzMy00NDMuNzMzMzMzLTQ0My43MzMzMzNzMTk4Ljk5NzMzMy00NDMuNzMzMzMzIDQ0My43MzMzMzMtNDQzLjczMzMzNCA0NDMuNzMzMzMzIDE5OC45OTczMzMgNDQzLjczMzMzNCA0NDMuNzMzMzM0LTE5OS4xNjggNDQzLjczMzMzMy00NDMuNzMzMzM0IDQ0My43MzMzMzN6IG0wLTgxOS4yYy0yMDcuMDE4NjY3IDAtMzc1LjQ2NjY2NyAxNjguNDQ4LTM3NS40NjY2NjYgMzc1LjQ2NjY2N3MxNjguNDQ4IDM3NS40NjY2NjcgMzc1LjQ2NjY2NiAzNzUuNDY2NjY2IDM3NS40NjY2NjctMTY4LjQ0OCAzNzUuNDY2NjY3LTM3NS40NjY2NjYtMTY4LjQ0OC0zNzUuNDY2NjY3LTM3NS40NjY2NjctMzc1LjQ2NjY2N3oiIHAtaWQ9IjU4MzEiIGZpbGw9IiNkODFlMDYiPjwvcGF0aD48cGF0aCBkPSJNNTM1Ljg5MzMzMyA1NjIuNjg4Yy0xOC43NzMzMzMgMC0zNC4xMzMzMzMtMTUuMzYtMzQuMTMzMzMzLTM0LjEzMzMzM1YzMTkuMTQ2NjY3YzAtMTguNzczMzMzIDE1LjM2LTM0LjEzMzMzMyAzNC4xMzMzMzMtMzQuMTMzMzM0czM0LjEzMzMzMyAxNS4zNiAzNC4xMzMzMzQgMzQuMTMzMzM0djIwOS4yMzczMzNjMCAxOC45NDQtMTUuMzYgMzQuMzA0LTM0LjEzMzMzNCAzNC4zMDR6IiBwLWlkPSI1ODMyIiBmaWxsPSIjZDgxZTA2Ij48L3BhdGg+PHBhdGggZD0iTTUzNS44OTMzMzMgNjcwLjIwOG0tNTEuNzEyIDBhNTEuNzEyIDUxLjcxMiAwIDEgMCAxMDMuNDI0IDAgNTEuNzEyIDUxLjcxMiAwIDEgMC0xMDMuNDI0IDBaIiBwLWlkPSI1ODMzIiBmaWxsPSIjZDgxZTA2Ij48L3BhdGg+PC9zdmc+');
      position: absolute;
      display: inline-block;
      visibility: inherit;
      top: 8px;
      right: 16px;
    }
    .#{$css-prefix}upload-list-item-error .#{$css-prefix}upload-list-item-op {
      right: 32px;
    }
  }
  .#{$css-prefix}upload-list-image {
    .#{$css-prefix}upload-list-item-error::after {
      line-height: 62px;
    }
    .#{$css-prefix}upload-list-item-error .#{$css-prefix}upload-list-item-op {
      margin-right: 18px;
    }
  }
  .#{$css-prefix}upload-list-text
    .#{$css-prefix}upload-list-item-error.#{$css-prefix}upload-list-item-error-with-msg::after {
    top: 10px;
  }
}
//card类规范修改
.#{$css-prefix}upload-list-card {
  .upload-card-hover-warps {
    img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .extra-icons {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #ddd;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      opacity: 0;
    }
  }
  > :hover {
    .extra-icons {
      opacity: 1;
    }
  }
  .#{$css-prefix}upload-list-item-error {
    .#{$css-prefix}icon-cry::before {
      width: 16px;
      font-size: 16px;
    }
  }
  .#{$css-prefix}upload-list-item-error:hover {
    .extra-icons {
      background: initial;
    }
  }
  .#{$css-prefix}upload-list-item-error::after {
    content: '上传失败';
    position: absolute;
    color: #c82727;
    font-size: 12px;
    z-index: 1;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
  }
}

// 拖拽上传样式
.#{$css-prefix}upload-dragable {
  width: fit-content;

  .#{$css-prefix}upload-inner {
    display: inline-block;
  }

  .#{$css-prefix}upload-drag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: fit-content;
    padding: $s-17 $s-40;

    .#{$css-prefix}upload-drag-icon {
      margin: 10px;
    }

    .#{$css-prefix}upload-drag-a {
      color: $b-design-upload-active-color;
    }
  }

  // hover样式
  .#{$css-prefix}upload-drag:hover {
    box-shadow: $b-design-upload-card-hover-box-shadow;
    border: $b-design-upload-drag-hover-border;
  }

  // 文字列表的长度调整，其他样式遵循于文字列表
  .#{$css-prefix}upload-list {
    width: 100%;

    .#{$css-prefix}upload-list-item-uploading {
      line-height: $b-design-upload-small-line-height;
    }
  }

  // disabled状态
  &.#{$css-prefix}disabled {
    .#{$css-prefix}upload-drag {
      background: $b-design-upload-disabled-color;
    }
  }
}

// 文字列表和图片列表尺寸样式
.#{$css-prefix}upload {
  &.#{$css-prefix}large {
    .#{$css-prefix}upload-list.#{$css-prefix}upload-list-text {
      .#{$css-prefix}upload-list-item-error-with-msg {
        .#{$css-prefix}upload-list-item-op {
          margin-top: 12px;
        }
      }
    }

    .#{$css-prefix}upload-list.#{$css-prefix}upload-list-image {
      .extra-icons {
        margin-top: -27px;
      }

      .#{$css-prefix}upload-list-item,
      .#{$css-prefix}upload-list-item-error-msg {
        box-sizing: border-box;
        padding: 4px 16px;
      }

      .#{$css-prefix}upload-list-item-thumbnail {
        margin-top: 6px;
        margin-right: 8px;
      }

      .#{$css-prefix}upload-list-item-name {
        margin-left: 36px;
      }

      .#{$css-prefix}upload-list-item-error-with-msg {
        .#{$css-prefix}upload-list-item-name {
          height: calc(#{$b-design-upload-medium-line-height} / 2) !important;
        }

        .#{$css-prefix}upload-list-item-error-msg {
          margin-left: 36px;
          height: calc(#{$b-design-upload-medium-line-height} / 2);
          padding: 0;
        }

        .#{$css-prefix}upload-list-item-op {
          margin-top: 12px;
        }
      }
    }

    .#{$css-prefix}upload-list:not(.#{$css-prefix}upload-list-card) {
      // 三种尺寸只需要区分高度，line-height和完成状态的标记margin-right
      .#{$css-prefix}upload-list-item,
      .#{$css-prefix}upload-list-item-error-msg {
        height: $b-design-upload-large-height;
        line-height: $b-design-upload-large-line-height;
      }

      // 带有错误提示信息的lineheight调整
      .#{$css-prefix}upload-list-item-error-with-msg {
        line-height: calc(#{$b-design-upload-large-line-height} / 2);

        .#{$css-prefix}upload-list-item-error-msg {
          line-height: calc(#{$b-design-upload-large-line-height} / 2);
        }

        .#{$css-prefix}upload-list-item-name {
          height: calc(#{$b-design-upload-large-height}/ 2);
          line-height: calc(#{$b-design-upload-large-line-height}/ 2);
        }
      }

      .#{$css-prefix}upload-list-item-op {
        top: (
            $b-design-upload-large-height - $b-design-upload-large-line-height
          ) / 2;
      }
    }
  }

  &.#{$css-prefix}medium {
    .extra-icons {
      margin-top: -20px;
    }

    .#{$css-prefix}upload-list.#{$css-prefix}upload-list-image {
      .#{$css-prefix}upload-list-item,
      .#{$css-prefix}upload-list-item-error-msg {
        box-sizing: border-box;
        padding: 4px 16px;
      }

      .#{$css-prefix}upload-list-item-thumbnail {
        margin-top: 6px;
        margin-right: 8px;
      }

      .#{$css-prefix}upload-list-item-name {
        margin-left: 36px;
      }

      .#{$css-prefix}upload-list-item-error-with-msg {
        .#{$css-prefix}upload-list-item-name {
          height: calc(#{$b-design-upload-medium-line-height} / 2) !important;
        }

        .#{$css-prefix}upload-list-item-error-msg {
          margin-left: 36px;
          height: calc(#{$b-design-upload-medium-line-height} / 2);
          padding: 0;
        }
      }
    }

    .#{$css-prefix}upload-list:not(.#{$css-prefix}upload-list-card) {
      // 三种尺寸只需要区分高度，line-height和完成状态的标记margin-right
      .#{$css-prefix}upload-list-item,
      .#{$css-prefix}upload-list-item-error-msg {
        height: $b-design-upload-medium-height;
        line-height: $b-design-upload-medium-line-height;
      }

      .#{$css-prefix}upload-list-item-error-with-msg {
        line-height: calc(#{$b-design-upload-medium-line-height} / 2);

        .#{$css-prefix}upload-list-item-error-msg {
          line-height: calc(#{$b-design-upload-medium-line-height} / 2);
        }

        .#{$css-prefix}upload-list-item-name {
          height: calc(#{$b-design-upload-medium-height} / 2);
          line-height: calc(#{$b-design-upload-medium-line-height} / 2);
        }
      }

      .#{$css-prefix}upload-list-item-op {
        top: (
            $b-design-upload-medium-height - $b-design-upload-medium-line-height
          ) / 2;
        line-height: $b-design-upload-medium-line-height;
      }
    }
  }

  &.#{$css-prefix}small {
    .#{$css-prefix}upload-list.#{$css-prefix}upload-list-image {
      .extra-icons {
        margin-top: -16px;
      }

      .#{$css-prefix}upload-list-item-error {
        .#{$css-prefix}upload-list-item-op {
          margin-top: -2px;
        }
      }

      .#{$css-prefix}upload-list-item-error-with-msg {
        .#{$css-prefix}upload-list-item-op {
          margin-top: 5px;
        }
      }
    }

    .#{$css-prefix}upload-list:not(.#{$css-prefix}upload-list-card) {
      // 三种尺寸只需要区分高度，line-height和完成状态的标记margin-right
      .#{$css-prefix}upload-list-item {
        line-height: $b-design-upload-small-line-height;
      }

      .#{$css-prefix}upload-list-item-error-with-msg {
        line-height: calc(#{$b-design-upload-small-line-height} / 2);
      }
    }
  }
}

// 文字列表样式
.#{$css-prefix}text-list {
  .#{$css-prefix}upload-list-item-op {
    opacity: 0;
    right: $s-3;
  }

  .#{$css-prefix}upload-list-item:hover {
    .#{$css-prefix}upload-list-item-op {
      opacity: 1;
    }
  }

  .#{$css-prefix}upload-list-item {
    padding-left: $s-9;
  }

  // 前面的符号
  .#{$css-prefix}upload-list-item::before {
    content: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="23.-✅-Upload-上传-*-（原：File-uploader-上传）" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Upload-上传_white" transform="translate(-595.000000, -3963.000000)"><rect fill="none" x="0" y="0" width="1200" height="5799"></rect><g id="编组-16" transform="translate(90.000000, 3462.000000)"><g id="点击上传-/-uploading备份-4" transform="translate(489.000000, 415.000000)"><g id="点击上传-/-uploading" transform="translate(0.000000, 76.000000)"><g id="编组" transform="translate(16.000000, 10.000000)"><rect id="矩形" fill-opacity="0.01" fill="rgba(255,255,255)" x="0" y="0" width="16" height="16"></rect><path d="M7.9696962,12.4956789 C6.60404561,13.8347737 4.38988853,13.8347737 3.02423794,12.4956789 C1.65858735,11.1565841 1.65858735,8.98548249 3.02423794,7.6463877 L7.61644918,3.14347444 L7.66002179,3.10540979 C7.85611055,2.9531512 8.14178548,2.96583942 8.32294321,3.14347444 C8.50302901,3.32005837 8.51688176,3.59791786 8.36450147,3.79008264 L8.32294321,3.83623033 L3.73073198,8.33914359 C2.75526727,9.29563987 2.75526727,10.8464267 3.73073198,11.802923 C4.70619668,12.7594193 6.28773745,12.7594193 7.26320216,11.802923 L12.5619074,6.60725387 C13.1471863,6.03335611 13.1471863,5.10288398 12.5619074,4.52898621 C11.9766286,3.95508845 11.0277041,3.95508845 10.4424253,4.52898621 L5.85021409,9.03189948 C5.65512115,9.22319873 5.65512115,9.53335611 5.85021409,9.72465536 C6.04530703,9.91595462 6.36161518,9.91595462 6.55670812,9.72465536 L10.4424253,5.91449799 L10.4859979,5.87643334 C10.6820867,5.72417475 10.9677616,5.73686296 11.1489194,5.91449799 C11.3290052,6.09108192 11.3428579,6.3689414 11.1904776,6.56110618 L11.1489194,6.60725387 L7.26320216,10.4174112 C6.67792334,10.991309 5.72899887,10.991309 5.14372005,10.4174112 C4.55844123,9.84351348 4.55844123,8.91304136 5.14372005,8.33914359 L9.73593129,3.83623033 C10.711396,2.87973405 12.2929368,2.87973405 13.2684015,3.83623033 C14.2438662,4.79272661 14.2438662,6.34351348 13.2684015,7.30000976 L7.9696962,12.4956789 Z" id="路径" fill="rgba(155,155,155)"></path></g></g></g></g></g></g></svg>');
    position: absolute;
    top: 8px;
    left: 16px;
    z-index: 1;
  }

  // 只要有文件正在上传状态
  &.#{$css-prefix}on-progress {
    .#{$css-prefix}upload-list-item-name {
      z-index: 2000;

      span {
        opacity: 0;
      }
    }

    // 1. 完成上传
    .#{$css-prefix}upload-list-item-done {
      background-color: $b-design-upload-success-color;

      .#{$css-prefix}upload-list-item-name::after {
        content: '上传成功';
        font-size: $s-3;
        position: absolute;
        left: $s-9;
        color: $b-design-upload-normal-font-color;
      }

      .#{$css-prefix}upload-list-item-op {
        opacity: 1;
      }

      .#{$css-prefix}icon::before {
        content: '\E63A';
        color: $b-design-upload-success-icon-color;
      }
    }

    // 2. 发生错误
    .#{$css-prefix}upload-list-item-error {
      .#{$css-prefix}upload-list-item-name::after {
        content: '上传失败';
        font-size: $s-3;
        position: absolute;
        left: $s-9;
        color: $b-design-upload-error-border-color;
      }

      .#{$css-prefix}upload-list-item-op {
        opacity: 1;
      }

      .#{$css-prefix}icon::before {
        content: '\E60B';
        color: $b-design-upload-error-border-color;
      }
    }

    // 3. 正在上传
    .#{$css-prefix}upload-list-item-uploading {
      .#{$css-prefix}upload-list-item-name::after {
        z-index: 2001;
        content: '文件上传中...';
        font-size: $s-3;
        position: absolute;
        left: $s-9;
        color: $b-design-upload-normal-font-color;
      }

      .#{$css-prefix}upload-list-item-progress {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;

        .#{$css-prefix}progress-line,
        .#{$css-prefix}progress-line-container,
        .#{$css-prefix}progress-line-underlay,
        .#{$css-prefix}progress-line-overlay {
          height: 100%;
          border-radius: 4px;
        }

        .#{$css-prefix}progress-line-overlay {
          position: absolute;
          top: 0;
          border-radius: 0;
          background: $b-design-upload-success-color;
        }
      }
    }

    // 4. 等待上传
    .#{$css-prefix}upload-list-item-wait {
      .#{$css-prefix}upload-list-item-name::after {
        z-index: 2001;
        content: '文件等待上传';
        font-size: $s-3;
        position: absolute;
        left: $s-9;
        color: $b-design-upload-wait-font-color;
      }
    }
  }
}

// 图片列表样式
.#{$css-prefix}img-list {
  // 有文件还在上传
  &.#{$css-prefix}on-progress {
    // 1. 上传错误
    .#{$css-prefix}upload-list-item-error {
      .#{$css-prefix}upload-list-item-name {
        color: $b-design-upload-error-border-color;
      }

      .#{$css-prefix}upload-list-item-op {
        .#{$css-prefix}icon::before {
          content: '\E60B';
          color: $b-design-upload-error-border-color;
        }
      }
    }

    // 2. 上传完毕
    .#{$css-prefix}upload-list-item-done {
      .#{$css-prefix}upload-list-item-op {
        .#{$css-prefix}icon::before {
          content: '\E63A';
          color: $b-design-upload-success-icon-color;
        }
      }
    }

    // 3. 正在上传
    .#{$css-prefix}upload-list-item-uploading {
      .#{$css-prefix}upload-list-item-progress {
        width: 100%;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;

        .#{$css-prefix}upload-list-item-name {
          overflow: visible;
        }

        .#{$css-prefix}progress-line,
        .#{$css-prefix}progress-line-container,
        .#{$css-prefix}progress-line-underlay,
        .#{$css-prefix}progress-line-overlay {
          position: absolute;
          bottom: 0;
        }
      }
    }

    // 4. 等待上传
    .#{$css-prefix}upload-list-item-waiting {
      .#{$css-prefix}upload-list-item-name {
        color: $b-design-upload-wait-font-color;
      }
    }
  }

  // 全部文件上传完毕
  &.#{$css-prefix}all-finish {
    // 只有hover时才显示预览 下载和叉号
    .#{$css-prefix}upload-list-item-op .extra-icons {
      opacity: 0;
    }

    .#{$css-prefix}upload-list-item:not(.#{$css-prefix}upload-list-item-error):hover {
      .#{$css-prefix}upload-list-item-op .extra-icons {
        opacity: 1;
      }
    }
  }

  // 不同尺寸图片位置调整
  &.#{$css-prefix}large {
    .#{$css-prefix}upload-list-item-thumbnail {
      width: $s-9;
      height: $s-9;
      // margin-top: $s-3;
    }

    .#{$css-prefix}upload-list-item {
      padding-top: $b-design-upload-list-item-large-padding-tb;
      padding-bottom: $b-design-upload-list-item-large-padding-tb;
      line-height: $b-design-upload-list-item-large-height;
      height: $b-design-upload-list-item-large-height;
    }

    .#{$css-prefix}upload-list-item-error-msg {
      height: auto;
    }

    &.#{$css-prefix}upload
      .#{$css-prefix}upload-list-item-error-with-msg
      .#{$css-prefix}upload-list-item-error-msg {
      line-height: 1;
    }
  }

  &.#{$css-prefix}medium {
    .#{$css-prefix}upload-list-item-thumbnail {
      // margin-top: $s-2;
      width: $s-7;
      height: $s-7;
    }

    .#{$css-prefix}upload-list-item {
      padding-top: $b-design-upload-list-item-medium-padding-tb;
      padding-bottom: $b-design-upload-list-item-medium-padding-tb;
      line-height: $b-design-upload-list-item-medium-height;
      height: $b-design-upload-list-item-medium-height;
    }
  }

  &.#{$css-prefix}small {
    .#{$css-prefix}upload-list-item {
      padding-top: $b-design-upload-list-item-small-padding-tb;
      padding-bottom: $b-design-upload-list-item-small-padding-tb;
      line-height: $b-design-upload-list-item-small-height;
      height: $b-design-upload-list-item-small-height;
    }

    .#{$css-prefix}upload-list-item-thumbnail {
      width: $s-6;
      height: $s-6;
    }
  }
}

// grey主题样式
.#{$css-prefix}grey:not(.#{$css-prefix}upload-list-card) {
  .#{$css-prefix}upload-list-item:not(.#{$css-prefix}upload-list-item-error):not(.#{$css-prefix}upload-list-item-disabled) {
    border: #fff;
    background: #fff;
  }

  .#{$css-prefix}upload-list-item-uploading
    .#{$css-prefix}progress-line-underlay {
    background: #fff;
  }

  &.#{$css-prefix}upload-dragable:not(.#{$css-prefix}disabled):not(.#{$css-prefix}error) {
    .#{$css-prefix}upload-drag {
      background: #fff;
      border-color: #fff;
    }

    .#{$css-prefix}upload-drag:hover {
      border: $b-design-upload-drag-hover-border;
    }
  }
}

.#{$css-prefix}grey {
  .#{$css-prefix}upload-list-item:not(.#{$css-prefix}upload-list-item-error):not(.#{$css-prefix}upload-list-item-disabled) {
    .#{$css-prefix}upload-list-item-wrapper,
    .#{$css-prefix}upload-card {
      border: #fff;
      background: #fff;
    }

    .#{$css-prefix}upload-card:hover {
      border: $b-design-upload-drag-hover-border;
    }

    &.#{$css-prefix}upload-list-item-uploading
      .#{$css-prefix}upload-list-item-handler
      .#{$css-prefix}btn:hover,
    .#{$css-prefix}progress-line-underlay {
      background: #fff;
    }
  }
}

// white主题下背景修复
.#{$css-prefix}white {
  .#{$css-prefix}upload-list-item:not(.#{$css-prefix}upload-list-item-error):not(.#{$css-prefix}upload-list-item-disabled) {
    .#{$css-prefix}upload-list-item-wrapper,
    .#{$css-prefix}upload-card {
      border: $color-fill1-1;
      background: $color-fill1-1;
    }

    .#{$css-prefix}upload-card:hover {
      border: $b-design-upload-drag-hover-border;
    }
  }
}
