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

.b(ap-upload-single, {
    user-select: none;
    
    .ant-upload-drag {
      background: #F2F6F9;
      border: 1px dashed var(--ap-upload-single-color-border,#DEE4ED);
      height:200px;
    
      &:not(.ant-upload-disabled):hover {
        background: rgba(0, 112, 255, 0.1);
        border-color: #0070ff;
      }

      .ant-upload-btn {
        padding: 0;
      }

      .ant-upload-disabled {
        cursor: default;
      }
    }

    &-affix-wrapper-status-error {
      .ant-upload-drag:not(.ant-upload-disabled) {
        border-color: #FF4D4F;
        &:hover {
          border-color: #FF4D4F80;
        }
      }
    }

    &__content {
      display: flex;
      justify-content: center;
      align-items: center;
      height:100%;
    }

    &__content-file {
      width: min(516px, 77.24%);
      height: 96px;
      background: #FFFFFF;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 0 24px;

      &-icon {
        flex-shrink: 0;
        margin-right: 16px;

        svg {
          width: 48px;
        }
      }

      &-name {
        flex: 1;
        text-align: start;

        &>.ant-typography {
          color: var(--name-color);
          margin-bottom: 0;
          word-break: break-all;
        }
      }

      &-delete {
        flex-shrink: 0;
        margin-left: 24px;

        svg {
          width: 20px;
          color: #ff4d4f;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }

    &__content-ing {
      &-name {
        --name-color: var(--ap-upload-single-color-main,#182948);
        .ant-progress-line{
          margin-inline-end: 0;
          margin-bottom: 0;
        }
      }
    }

    &__content-error {
      &-name {
        --name-color: #FF4D4F;
      }
    }

    &__content-done {
      &-name {
        --name-color: #0070ff;
      }
    }
    
    &__content-empty {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-icon {
        svg {
          width: 56px;
        }
      }

      &-title {
        margin-top: 10px;
        color: var(--ap-upload-single-color-main,#182948);
        font-size: 16px;
        line-height: 22px;
      }

      &-sub-title {
        margin-top: 4px;
        color: var(--ap-upload-single-color-sub,#abb7cc);
        font-size: 12px;
        line-height: 18px;
      }
    }
  }

);