/**
* 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';
@upload-list-prefix-cls: ~'@{css-prefix}upload-list';
@popupload__modal-prefix-cls: ~'@{css-prefix}popupload__modal';
@alert-prefix-cls: ~'@{css-prefix}alert';

.@{popupload__modal-prefix-cls} {
  .component-css-vars-pop-upload();
}

.@{popupload-prefix-cls} {
  .component-css-vars-pop-upload();
  display: flex;
  align-items: center;
  font-size: var(--ti-popupload-font-size);

  &__dialog {
    max-height: 512px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  &__dialog-header {
    .@{alert-prefix-cls} {
      margin-bottom: var(--ti-popupload-dialog-header-alert-margin-bottom);
    }
  }

  &__dialog-body {
    padding-bottom: var(--ti-popupload-dialog-table-body-padding-bottom);

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

  &__dialog-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--ti-popupload-dialog-footer-padding-bottom);
  }

  &__dialog-tips {
    display: flex;
    flex-direction: column;
    margin: 12px 0;
  }

  &__dialog-table {
    font-size: var(--ti-popupload-dialog-table-font-size);
    height: var(--ti-popupload-dialog-table-height);
    width: 100%;
    margin-top: var(--ti-popupload-dialog-margin-top);

    .header-col {
      border-right: 1px solid var(--ti-popupload-dialog-table-border-color);
      padding: var(--ti-popupload-table-header-col-padding-vertical)
        var(--ti-popupload-table-header-col-padding-horizontal);

      &:last-child {
        border-right: none;
      }
    }

    .body-col {
      padding: var(--ti-popupload-table-body-col-padding-vertical) var(--ti-popupload-table-body-col-padding-horizontal);
      margin: var(--ti-popupload-table-body-col-margin-vertical) var(--ti-popupload-table-body-col-margin-horizontal);
      line-height: var(--ti-popupload-table-body-col-line-height);
    }

    .col1 {
      width: 60%;
    }

    .col2 {
      width: 20%;
    }

    .col3 {
      width: 20%;
    }
  }

  &__dialog-table-header {
    height: var(--ti-popupload-dialog-table-header-height);
    width: 100%;
    color: var(--ti-popupload-dialog-table-header-text-color);
    font-weight: var(--ti-popupload-dialog-table-header-font-weight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ti-popupload-dialog-table-header-bg-color);
    border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
  }

  &__dialog-table-body {
    width: 100%;
    height: calc(100% - var(--ti-popupload-dialog-table-header-height));
    overflow-y: auto;
    border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
  }

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

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

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

    .delIcon {
      width: var(--ti-popupload-dialog-table-icon-size);
      fill: var(--ti-popupload-dialog-table-icon-color);
      cursor: pointer;

      &:hover {
        width: var(--ti-popupload-dialog-table-icon-size-hover);
        fill: var(--ti-popupload-dialog-table-icon-color-hover);
      }
    }
  }

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