/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@popupload-prefix-cls: ~'@{css-prefix}popupload';
@file-upload-prefix-cls: ~'@{css-prefix}file-upload';
@upload-list-prefix-cls: ~'@{css-prefix}upload-list';
@popconfirm-prefix-cls: ~'@{css-prefix}popconfirm';
@popupload__modal-prefix-cls: ~'@{css-prefix}popupload__modal';
@alert-prefix-cls: ~'@{css-prefix}alert';

.@{popupload__modal-prefix-cls} {
  .inject-PopUpload-vars();
}

.@{popupload-prefix-cls} {
  .inject-PopUpload-vars();
  display: flex;
  align-items: center;
  font-size: var(--tv-PopUpload-font-size);

  &__dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  &__dialog-header {
    .@{alert-prefix-cls} {
      margin-bottom: 16px;
    }
  }

  &__dialog-body {
    padding-bottom: 10px;

    .@{upload-list-prefix-cls} {
      display: none;
    }
  }

  &__dialog-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 24px;
  }

  &__dialog-tips {
    display: flex;
    flex-direction: column;
    margin: 12px 0;
    color: var(--tv-PopUpload-table-body-col-color);
  }

  &__dialog-tips-item {
    margin: 4px 0;
  }

  &__dialog-table {
    font-size: var(--tv-PopUpload-dialog-table-font-size);
    height: var(--tv-PopUpload-dialog-table-height);
    width: 100%;
    margin-top: 20px;

    .header-col {
      position: relative;
      padding: 0 12px;

      &:not(:last-child):after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        display: inline-block;
        content: '';
        width: 1px;
        height: var(--tv-PopUpload-dialog-table-line-height);
        background-color: transparent;
      }
    }

    .body-col {
      padding: 8px 12px;
      margin: 0;
      line-height: var(--tv-PopUpload-table-body-col-line-height);
      color: var(--tv-PopUpload-table-body-col-color);
    }

    .col1 {
      width: 46%;
    }

    .col2 {
      width: 17%;
    }

    .col3 {
      width: 21%;
    }

    .col4 {
      width: 16%;
    }
  }

  &__dialog-table-header {
    height: var(--tv-PopUpload-dialog-table-header-height);
    width: 100%;
    color: var(--tv-PopUpload-dialog-table-header-text-color);
    font-weight: var(--tv-PopUpload-dialog-table-header-font-weight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--tv-PopUpload-dialog-table-header-bg-color);
  }

  &__dialog-table-body {
    width: 100%;
    height: calc(100% - var(--tv-PopUpload-dialog-table-header-height));
    overflow-y: auto;
  }

  &__dialog-table-list {
    list-style: none;

    &-footer {
      margin-top: 12px;

      & > .footer-error-tip {
        color: var(--tv-PopUpload-status-fail-icon-color);
      }
    }
  }

  &__dialog-table-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:nth-child(even) {
      background: var(--tv-PopUpload-table-item-even-bg-color);
    }

    .del-col {
      color: var(--tv-PopUpload-dialog-delete-text-color);
      width: 100%;
      cursor: pointer;
    }
  }

  &__modal {
    & .@{popupload__modal-prefix-cls}__body {
      overflow-y: auto;
    }

    .@{file-upload-prefix-cls} .@{upload-list-prefix-cls}__text-title {
      display: none;
    }

    .@{popupload-prefix-cls}__dialog-footer {
      justify-content: flex-end;
    }
  }

  // 新规范适配
  &__pop-confirm {
    .@{popconfirm-prefix-cls}-popover__title {
      white-space: nowrap;
    }
  }

  &__status-icon {
    display: inline-block;
    margin-right: 7px;
    height: 8px;
    width: 8px;
    border: 2px solid var(--tv-PopUpload-status-icon-border-color);
    border-radius: 50%;

    &&-success {
      border-color: var(--tv-PopUpload-status-success-icon-border-color);
    }

    &&-fail {
      border-color: var(--tv-PopUpload-status-fail-icon-color);
    }
  }
}
