@import '../mixins/mixins.less';

.b(ap-upload-single-file, {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px dashed #dee4ed;
  border-radius: 4px;
  background: #f2f6f9;
  user-select: none;

  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .state-un {
    flex-direction: column;

    .state-un-icon {
      display: block;
      width: 56px;
    }

    .state-un-title {
      margin-top: 10px;
      color: #182948;
      font-size: 16px;
      line-height: 22px;
    }

    .state-un-subtitle {
      margin-top: 4px;
      color: #abb7cc;
      font-size: 12px;
      line-height: 18px;
    }
  }

  .state-ing {
    display: flex;
    align-items: center;
    width: min(516px, 77.24%);
    height: 96px;
    padding: 0 24px;
    border-radius: 4px;
    background: #fff;

    .left {
      flex-shrink: 0;
      width: 48px;
      margin-right: 16px;

      img {
        display: block;
        width: 100%;
      }
    }

    .center {
      flex: 1;

      .center-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        text-align: start;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .center-progress {
        .ant-progress-line {
          margin-right: 0;
          margin-bottom: 0;
        }
      }
    }

    .right {
      flex-shrink: 0;
      margin-left: 24px;
      color: #ff4d4f;
      font-size: 20px;
      cursor: pointer !important;
    }
  }
});

.b(ap-upload-single-file-un, {
  cursor: pointer;

  &:hover {
    border: 1px dashed #0070ff;
    background: rgb(0 112 255 / 10%);
  }
});

.b(ap-upload-single-file-admin, {
  border: 1px dashed #D9D9D9;

  .state-un {
    .state-un-title {
      color: #333;
    }

    .state-un-subtitle {
      color: #BFBFBF;
    }
  }
});