@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(upload) {
  @include e(picture-card-icon) {
    display: inline-flex;
    align-items: center;
    font-size: 32px;
    font-style: normal;
    line-height: 0;
    color: #cfcfcf;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
  }

  &.ant-upload-wrapper {
    .ant-upload-list {
      &.ant-upload-list-picture,
      &.ant-upload-list-picture-card {
        .ant-upload-list-item {
          padding: 0;
          overflow: hidden;
          border: 1px solid #d9d9d9;
          border-radius: 4px;

          &::before {
            width: 100%;
            height: 100%;
          }
        }

        .ant-upload-list-item-thumbnail img,
        .ant-upload-list-item-thumbnail {
          object-fit: cover;
        }

        // margin-top: 10px;
        .ant-upload-list-item-thumbnail .anticon {
          $font-size-icon: 28px;

          font-size: $font-size-icon;

          &.anticon-uploading {
            margin-top: 10px;
            font-size: $font-size-icon * 1.15;
            color: #cfcfcf;
          }
        }
      }

      // text
      &.ant-upload-list-text {
        .ant-upload-list-item {
          flex-wrap: wrap;
          height: auto;
          min-height: 22px;

          .ant-upload-list-item-progress {
            position: relative;
            bottom: 0;
            flex-basis: 100%;
            width: 100%;
          }
        }
      }
    }

    &.ant-upload-picture-card-wrapper {
      .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {
        margin-block: 0 12px;
        margin-inline: 0 24px;

        .ant-upload-list-item-progress {
          right: 4px;
          bottom: 16px;
          left: 4px;
          width: calc(100% - 8px);
        }
      }

      .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
      .ant-upload.ant-upload-select {
        width: 90px;
        height: 90px;
      }

      .ant-upload.ant-upload-select-picture-card {
        background: rgb(247 248 250 / 50.2%);
        border: 1px dashed #e5e6eb;
        border-radius: 2px;
      }
    }

  }
}

@include b(upload-file-preview-drawer) {
  .ant-drawer-body {
    position: relative;
    padding: 0 16px;
    overflow: hidden auto;
  }
}

@include b(upload-file-preview) {
  // @include e(loading) {
  // }

  @include e(item) {
    width: 100%;
    padding: 20px 10px;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid getCssVar(border-color);

    @include e(file-info) {
      flex: 1;
      overflow: hidden;
    }

    @include e(ellipsis) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @include e(file-name) {
      font-size: 14px;
      font-weight: 400;
      color: #616161;
    }

    @include e(file-detail) {
      width: 100%;
      margin-top: 4px;
      overflow: hidden;
      font-size: 12px;
      font-weight: 400;
      color: #a5a5a5;
    }

    @include e(divider) {
      margin: 0 4px;
    }

    @include e(download) {
      width: 40px;
      min-height: 40px;

      .ant-btn {
        font-size: 20px;
        color: #afafaf;
        transition: all 0.2s;
      }
    }

    &:not(:hover) {
      @include e(download) {
        .ant-btn {
          display: none;
          opacity: 0;
        }
      }
    }
  }
}