/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
.@{ant-prefix}-upload-list {
  .@{ant-prefix}-btn.@{ant-prefix}-upload-list-item-card-actions-btn.@{ant-prefix}-btn-sm {
    width: 32px;
    min-width: auto;
    border: none;
    background: transparent;
  }
}

.@{ant-prefix}-sp-upload-notice.sm-upload-notice {
  margin-top: 12px;
  color: @color-text-icon-3;
  .fontStyle-5-normal();

  p {
    margin: 0;
  }

  p:not(:first-child) {
    margin-top: 4px;
  }
}
.@{ant-prefix}-sp-upload-list.sm-upload-list {
  margin-top: 16px;

  .sm-upload-list-item {
    color: @color-text-icon-1;

    .fontStyle-4-normal();

    &:not(:first-child) {
      margin-top: 8px;
    }
  }

  .sm-upload-list-item-card-actions {
    // position: absolute;
    top: 0;
    right: 0;
  }

  .sm-upload-list-item-card-actions-btn {
    display: inline-block;
    width: 12px;
    height: 20px;
    cursor: pointer;

    &-close {
      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgOC41QzUgOC43NzYxNCA1LjIyMzg2IDkgNS41IDlDNS43NzYxNCA5IDYgOC43NzYxNCA2IDguNVY2QzYgNS43MjM4NiA1Ljc3NjE0IDUuNSA1LjUgNS41QzUuMjIzODYgNS41IDUgNS43MjM4NiA1IDZWOC41WiIgZmlsbD0iIzU2NTk2MCIvPgo8cGF0aCBkPSJNOCA4LjVDOCA4Ljc3NjE0IDguMjIzODYgOSA4LjUgOUM4Ljc3NjE0IDkgOSA4Ljc3NjE0IDkgOC41VjZDOSA1LjcyMzg2IDguNzc2MTQgNS41IDguNSA1LjVDOC4yMjM4NiA1LjUgOCA1LjcyMzg2IDggNlY4LjVaIiBmaWxsPSIjNTY1OTYwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMjM2NSAwLjU1Mjc3NEw0LjUwMDAyIDJIMUMwLjcyMzg1OCAyIDAuNSAyLjIyMzg2IDAuNSAyLjVDMC41IDIuNzc2MTQgMC43MjM4NTggMyAxIDNIMS43OTc3M0wyLjE4NDEgMTEuMDk1M0MyLjIzNDk5IDEyLjE2MTYgMy4xMTQzMiAxMyA0LjE4MTgyIDEzSDkuODE4MThDMTAuODg1NyAxMyAxMS43NjUgMTIuMTYxNiAxMS44MTU5IDExLjA5NTNMMTIuMjAyMyAzSDEzQzEzLjI3NjEgMyAxMy41IDIuNzc2MTQgMTMuNSAyLjVDMTMuNSAyLjIyMzg2IDEzLjI3NjEgMiAxMyAySDkuNTAwMDJMOC43NzY0NCAwLjU1Mjc5OEM4LjYwNzA1IDAuMjE0MDA4IDguMjYwNzggMCA3Ljg4MjAxIDBINi4xMTgwN0M1LjczOTMxIDAgNS4zOTMwNSAwLjIxMzk5NyA1LjIyMzY1IDAuNTUyNzc0Wk03Ljg4MjAxIDFMNi4xMTgwNyAxTDUuNjE4MDYgMkg4LjM4MTk5TDcuODgyMDEgMVpNMTEuMjAxMSAzTDEwLjgxNyAxMS4wNDc3QzEwLjc5MTYgMTEuNTgwOCAxMC4zNTE5IDEyIDkuODE4MTggMTJINC4xODE4MkMzLjY0ODA3IDEyIDMuMjA4NCAxMS41ODA4IDMuMTgyOTYgMTEuMDQ3N0wyLjc5ODg3IDNIMTEuMjAxMVoiIGZpbGw9IiM1NjU5NjAiLz4KPC9zdmc+Cg==)
        center center no-repeat;
      background-size: 12px 12px;
    }
  }

  .sm-upload-list-item-info {
    display: flex;
    position: relative;
    align-items: center;
    border-radius: @corner-xs;

    &:hover {
      background-color: @color-primary-bright;
    }

    .sm-upload-list-item-content {
      margin-right: 24px;
      word-break: break-all;
    }

    .sm-upload-list-item-content-text {
      display: flex;
      min-width: 0;

      .sm-upload-list-item-content-suffix {
        flex-shrink: 0;
      }
    }

    .sm-upload-list-item-oper {
      height: @Spacing-10;
      margin-left: auto;
      margin-right: 6px;
      display: flex;
      align-items: center;

      .sm-upload-list-item-card-actions {
        height: @Spacing-10;
      }
    }
  }

  .sm-upload-icon-paper-clip {
    flex-shrink: 0;
    display: inline-block;
    margin: 2px;
    width: 12px;
    height: 12px;
    vertical-align: -4px;
    font-style: normal;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDczMjcgMS45ODI0MUM4LjQ0OTUzIDAuODE4OTU3IDEwLjE4NDEgMC42NjcyMjQgMTEuMzQ3NiAxLjY0MzQ1QzEyLjUxMSAyLjYxOTcxIDEyLjY2MjggNC4zNTQzIDExLjY4NjUgNS41MTc3NUw3LjAyNjMxIDExLjA3MTZDNi44NDg3OSAxMS4yODMxIDYuODc2NDEgMTEuNTk4NSA3LjA4NzkzIDExLjc3NkM3LjI5OTQ4IDExLjk1MzUgNy42MTQ4NSAxMS45MjU5IDcuNzkyMzcgMTEuNzE0NEwxMi40NTI2IDYuMTYwNTRDMTMuNzgzOCA0LjU3NDAyIDEzLjU3NjkgMi4yMDg2NyAxMS45OTA0IDAuODc3NDI5QzEwLjQwMzggLTAuNDUzODQgOC4wMzg0OSAtMC4yNDY5IDYuNzA3MjIgMS4zMzk2NUwxLjI0MzU0IDcuODUxQzAuMjY3MjgxIDkuMDE0NDUgMC40MTkwNDUgMTAuNzQ5IDEuNTgyNSAxMS43MjUzQzIuNzQ1OTUgMTIuNzAxNiA0LjQ4MDU0IDEyLjU0OTggNS40NTY3NiAxMS4zODYzTDEwLjU5OTEgNS4yNTc5OEMxMS4yMjAzIDQuNTE3NiAxMS4xMjM4IDMuNDEzNzggMTAuMzgzNCAyLjc5MjUzQzkuNjQzMDEgMi4xNzEyOCA4LjUzOTE5IDIuMjY3ODQgNy45MTc5MiAzLjAwODIzTDQuODY0NjkgNi42NDY5M0M0LjY4NzE3IDYuODU4NDggNC43MTQ3NiA3LjE3Mzg1IDQuOTI2MzEgNy4zNTEzN0M1LjEzNzg2IDcuNTI4ODYgNS40NTMyMiA3LjUwMTI3IDUuNjMwNzEgNy4yODk3Mkw4LjY4Mzk3IDMuNjUxMDJDOC45NTAyMyAzLjMzMzczIDkuNDIzMjkgMy4yOTIzMiA5Ljc0MDYxIDMuNTU4NThDMTAuMDU3OSAzLjgyNDgyIDEwLjA5OTMgNC4yOTc5IDkuODMzMDUgNC42MTUxOUw0LjY5MDc0IDEwLjc0MzVDNC4wNjk1IDExLjQ4MzkgMi45NjU2NSAxMS41ODA1IDIuMjI1MjkgMTAuOTU5MkMxLjQ4NDkgMTAuMzM4IDEuMzg4MzEgOS4yMzQxOCAyLjAwOTU5IDguNDkzNzlMNy40NzMyNyAxLjk4MjQxWiIgZmlsbD0iIzU2NTk2MCIvPgo8L3N2Zz4=)
      no-repeat center center;
    background-size: contain;
  }

  .sm-upload-list-item-name {
    margin-left: 4px;
  }

  .sm-upload-list-item-done {
    color: @color-text-icon-0;

    .sm-upload-list-item-name {
      cursor: pointer;
    }
  }

  .sm-upload-list-item-errmsg {
    margin-top: @spacing-xs;
    margin-left: @Spacing-10;

    .fontStyle-5-normal();

    .sm-upload-list-item-errmsg-text {
      color: @color-function-danger-main;
    }

    .sm-upload-list-item-errmsg-action {
      margin-left: 8px;
      color: @color-primary-brand;
      .fontStyle-5-normal();
      cursor: pointer;
    }

    .@{ant-prefix}-upload {
      .fontStyle-5-normal();
    }
  }

  .sm-upload-list-item-progress.@{ant-prefix}-progress {
    display: block;
    width: auto;
    margin: 4px 20px 0;

    .@{ant-prefix}-progress-outer {
      display: block;

      .@{ant-prefix}-progress-inner {
        display: block;
        background-color: @color-line-1;
      }
    }
  }

  .sm-upload-icon-paper-file {
    width: 16px;
    height: 20px;
    font-style: normal;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAoCAYAAACfKfiZAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEnSURBVHgB7ZhBasJAFIb/CbPIsrvWXqLQHqC0xXPUI3gD4wnUI3iPhOhCwYWCF1BEQdxlmUXwORERQU2GSWYiMt9msniQL3lv/sVjEAThsEV7aorHF5TA3++3xxhry9TyIBx0Ti8vE4+IICPh0B4N6CGVaOUVOSjpt6tKONBPpoQJgUwJUwJ3JUwK3JTQIpAkCWQltAis15u8krMEhwYWyxU456jV3o5nhgSYHwwIFWJ6CK3AFblD6LquGKZXqLDd7hDHMQoJfH1+HCVUeBe3YDSeZNY8fgums3mhFhQWSHu4FMGiC3sNrUApQSQTOMoCMkEkEzj3eI4gkgkcZQEbRFbAClgBEwIRqiMSOyLqoSqI+iw9fT/sipXWP/Tuiy6J0g+v13+8A0R2fcJ8auveAAAAAElFTkSuQmCC)
      no-repeat center center;
    background-size: contain;
  }

  // picture 样式uploadlist

  .sm-upload-list-item-type-picture {
    .fontStyle-5-normal();

    .sm-upload-list-item-info {
      min-height: @Spacing-27;
      display: flex;
      align-items: center;
      border-radius: @border-radius-base;
      border: 1px solid @color-line-1;
      background: @component-background;

      &:hover {
        border: 1px solid @color-primary-hover;
      }

      .sm-upload-list-item-pre {
        flex-shrink: 0;
        width: @Spacing-24;
        height: @Spacing-24;
        margin: (@Spacing-2 - 1) @Spacing-2 (@Spacing-2 - 1) (@Spacing-2 - 1);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: @Spacing-24;
        background: @color-background-page;
        border-radius: @corner-xs;
      }

      .sm-upload-list-item-content {
        position: relative;
        min-width: 0;

        .sm-upload-list-item-name-picture {
          width: 100%;
          display: flex;

          .sm-upload-list-item-name-suffix {
            flex-shrink: 0;
          }
        }

        .sm-upload-list-item-errmsg {
          margin-left: @Spacing-2;
        }

        .sm-upload-list-item-success-msg {
          margin-top: @Spacing-2;
          margin-left: @Spacing-2;
          font-size: @Font-Size-0;
          line-height: @Font-Lineheight-0;
          color: @color-text-icon-2;
        }

        .sm-upload-list-item-progress.@{ant-prefix}-progress {
          margin: 10px 30px 4px 4px;
        }

        .sm-upload-list-item-progress-text {
          display: inline-block;
          position: absolute;
          right: -15px;
          top: 23px;
          font-size: @Font-Size-0;
          line-height: @Font-Lineheight-0;
          color: @color-text-icon-2;
        }
      }

      .sm-upload-list-item-oper {
        height: @Spacing-8;
        display: flex;
        align-items: center;

        .sm-upload-list-item-card-actions {
          height: @Spacing-8;
        }

        .sm-upload-list-item-card-actions-btn {
          height: @Spacing-8;
        }
      }
    }
  }

  // icons

  .sm-upload-list-item-info {

    .sm-upload-list-item-oper {
      font-size: @font-size-base;
      color: @color-text-icon-1;

      .sm-upload-list-item-card-actions {
        margin: 0 6px;
        cursor: pointer;

        // &:nth-child(2) {
        //   right: @Spacing-4 + 30;
        // }

        // &:nth-child(3) {
        //   right: @Spacing-4 + 54;
        // }

        // &:nth-child(3) {
        //   right: @Spacing-4 + 78;
        // }
      }
    }
  }
}

// drag样式覆盖
.@{ant-prefix}-upload {
  &.@{ant-prefix}-upload-drag {
    background: @component-background;
    border-radius: 8px;
    border-color: @color-line-0;

    &-hover {
      border-color: @color-primary-hover;
      background: @color-primary-highlight;
    }

    .@{ant-prefix}-upload {
      padding: 54px 78px;
    }

    p.@{ant-prefix}-upload-drag-icon {
      margin-bottom: 10px;

      .@{iconfont-css-prefix} {
        color: @color-text-icon-2;
        font-size: 32px;
      }
    }

    p.@{ant-prefix}-upload-hint {
      font-size: @font-size-sm;
      line-height: @Font-Lineheight-0;
      color: @color-text-icon-1;
    }
  }
}