@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';

.pro-upload {
  // display: inline-flex;

  // 拖拽上传
  .pro-upload-dragger {
    .pro-upload-handle-box {
      background   : #F8F9FA;
      border-radius: var(--zaui-border-radius, 4px);
      padding      : var(--zaui-space-size-sm, 8px);

      .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
        background-color: var(--zaui-base-bg, #fff);
      }

      .drag-upload-inner {
        min-width      : 392px;
        height         : 110px;
        display        : flex;
        align-items    : center;
        justify-content: center;

        .upload-dragger-control {
          background-color: var(--zaui-base-bg, #fff);

          .dragger-txt-line1 {
            display    : flex;
            line-height: 26px;
            align-items: center;

            .icon-upload {
              display  : inline-block;
              font-size: 30px;
              color    : #C5C7CD;
            }

            .dragger-txt {
              margin-left: 9px;
              font-size  : var(--zaui-font-size, 14px);


              color      : rgba(0, 0, 0, 0.85);
              line-height: 20px;
            }

            .click-txt {
              color: var(--zaui-brand, #006AFF);
            }
          }

          .file-ext {
            text-align: center;
            margin-top: 10px;
            font-size : var(--zaui-font-size-sm, 12px);


            color      : #939599;
            line-height: 14px;

          }
        }

        // 单个文件展示样式
        .dragger-single-file {
          display        : flex;
          justify-content: center;
          flex-direction : column;
          padding        : 0 var(--zaui-space-size-lg, 32px);

          .file-type-icon {
            width : 18px;
            height: 22px;
            margin: 0 auto;
          }

          .file-item-wrapper {
            padding: 0 var(--zaui-space-size-lg, 32px);
          }


          .file-info-box {
            margin-top: 11px;
            display   : flex;

            &.file-box-error {
              color: var(--zaui-danger);
            }

            .file-name {
              display   : box;
              overflow  : hidden;
              line-clamp: 1;
              box-orient: vertical;
              word-break: break-all;
            }

            .file-ext {
              word-break: keep-all;
            }

            .file-size {
              word-break: keep-all;
            }


            .file-download {
              margin-left: var(--zaui-space-size-sm, 8px);
            }
          }

          .file-action-box {
            display        : flex;
            justify-content: center;
            margin-top     : 3px;

            .file-del {
              margin-left: 30px
            }
          }
        }

      }
    }

  }

  // 按钮上传
  .pro-upload-button {
    display: flex;

    >span {
      width  : 100%;
      display: block;
    }

    .pro-upload-button-inner {
      display: flex;

      .pro-upload-button-inner-right {
        line-height: 32px;
        margin-left: 10px;
      }
    }

    .upload-tip-txt {
      margin-left: 10px;
      line-height: 32px;
      font-size  : var(--zaui-font-size-sm, 12px);


      color: #939599;
    }
  }


  // 图片
  .pro-upload-image {

    position: relative;
    display : inline-flex;

    .@{ant-prefix}-upload-list-picture-card-container,
    .@{ant-prefix}-upload-select-picture-card {
      width : 126px;
      height: 126px;
    }

    .image-example {
      position     : absolute;
      word-break   : keep-all;
      top          : 0;
      right        : -10px;
      width        : 88px;
      height       : 32px;
      transform    : translate(100%, 0);
      text-align   : center;
      line-height  : 32px;
      background   : #FFFFFF;
      border-radius: var(--zaui-border-radius, 4px);
      border       : 1px solid #DCDCDC;

    }

    .file-item-image {
      position        : relative;
      overflow        : hidden;
      // height       : 100%;
      height          : 126px;
      width           : 126px;
      border          : 1px dashed #d9d9d9;
      overflow        : hidden;
      border-radius   : 8px;

      .file-type-icon-img {
        position : absolute;
        width    : 30px;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);

      }

      .image-con {
        display: block;
        width  : 100%;
        height : 100%;
      }

      &:hover .actions-wrap {
        display         : block;
        background-color: rgba(0, 0, 0, 0.75);
      }

      .actions-wrap {
        transition      : all 2s;
        position        : absolute;
        display         : none;
        width           : 100%;
        top             : 0;
        bottom          : 0;
        background-color: rgba(0, 0, 0, 0.5);

        .action-top {
          flex           : 1;
          display        : flex;
          align-items    : center;
          flex-direction : column;
          height         : calc(100% - 36px);
          justify-content: center;
        }

        .action-button {
          height     : 36px;
          line-height: 36px;
          background : #FFFFFF;
          text-align : center;
        }

        .action-item {
          color    : #fff;
          font-size: var(--zaui-font-size-sm, 12px);
          opacity  : 0.8;

          .action-icon {
            margin-right: 10px;
            transform   : translate(0, 3px);
          }

          &:hover {
            opacity: 1;
          }
        }

        .action-button {
          .action-item {
            color: var(--zaui-danger, #FF005F);
          }
        }
      }
    }

    .file-item-image.actions-wrap-error {
      border: 1px solid #FF005F;
    }

    .image-uploading {
      padding    : 20px;
      display    : flex;
      align-items: center;
      height     : inherit;
    }
  }

  .pro-upload-image {
    .@{ant-prefix}-space-item {
      display: inline-flex;
    }

    .pro-upload-image-footer {
      margin-top: -8px;
    }
  }

  .file-actions {
    .file-action-item {
      padding-top: var(--zaui-space-size-xs, 4px) !important;
    }

    .action-icon {
      display       : inline-flex;
      align-items   : center;
      color         : inherit;
      font-style    : normal;
      text-align    : center;
      text-transform: none;
      vertical-align: -0.15em;
      text-rendering: optimizeLegibility;

      span {
        display       : inline-flex;
        align-items   : center;
        color         : inherit;
        font-style    : normal;
        text-align    : center;
        text-transform: none;
        vertical-align: -0.15em;
        text-rendering: optimizeLegibility;
      }

    }
  }
}

.pro-upload-example {
  width          : 100%;
  max-height     : 400px;
  min-height     : 200px;
  overflow-y     : auto;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.proupload-modal-preview {
  .ant-modal {
    width: 600px;
  }
}