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

.pro-table {
  &.pro-table-bordered {
    .@{ant-prefix}-table .@{ant-prefix}-table-thead>tr>th {
      border-bottom: 1px solid #f0f0f0
    }

    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table {
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>thead>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>thead>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>thead>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>thead>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tbody>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tbody>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tbody>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tbody>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tfoot>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tfoot>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tfoot>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tfoot>tr>th,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tfoot>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tfoot>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tfoot>tr>td,
    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tfoot>tr>td {
      border-right: 1px solid rgba(0, 0, 0, 0.06);
    }

    .@{ant-prefix}-table .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
      border-bottom: 1px solid #f0f0f0;
    }

    .@{ant-prefix}-table>.@{ant-prefix}-table-container {
      border-left: 1px solid rgba(0, 0, 0, 0.06);
    }
  }

  .custom-column-btn {
    display    : inline-flex;
    align-items: center;

    &:hover,
    &:visited,
    &:focus {
      color     : unset;
      border    : 1px solid #d9d9d9;
      background: unset;
    }

    .anticon {
      height: 16px;
    }
  }

  .@{ant-prefix}-table-tbody {
    .@{ant-prefix}-table-cell-fix-left, .@{ant-prefix}-table-cell-fix-right {
      background: unset !important;
    }
  }

  .@{ant-prefix}-table-body {
    .@{ant-prefix}-table-tbody .@{ant-prefix}-table-row:nth-child(odd).new-cell {
      background: #d2fff4 !important;

      td {
        background: #d2fff4 !important;
        border-bottom: 1px solid var(--zaui-form-control-line, #dcdcdc);
      }
    }

    .@{ant-prefix}-table-cell .varied-cell {
      margin-left: -8px;
      background: var(--zaui-contract-bg, #fffaa1);
      padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
      border-radius: var(--zaui-border-radius, 4px);
    }

    .varied-cell.empty-cell {
      width: 24.5px;
    }
  }

  .copyable-table-cell {


    .@{ant-prefix}-typography {
      margin-bottom: 0;
      display      : flex;
      align-items  : center;
    }

    .drag-icon {
      &>div {
        display    : flex;
        align-items: center;
      }
    }

    .@{ant-prefix}-typography-copy-success {
      svg {
        fill: var(--zaui-success, #00ae4d);
      }
    }

    svg {
      width  : 14px;
      height : 14px;
      fill   : #3f3f3f;
      display: inline-block;
    }
  }

  &.pro-table-no-stripe {
    .@{ant-prefix}-table.@{ant-prefix}-table-scroll-horizontal .@{ant-prefix}-table-tbody .@{ant-prefix}-table-row:nth-child(n)>td {
      background: var(--zaui-base-bg, #ffffff);
    }
  }

  .@{ant-prefix}-table-thead {
    .@{ant-prefix}-dropdown-trigger {
      &.@{ant-prefix}-dropdown-open {

        .anticon-down {
          transition: transform 0.3s;
          transform : rotateZ(180deg);
        }
      }
    }
  }

  .pro-table-container {
    position: relative;

    .pro-table-resizable-line {
      position   : absolute;
      width      : 0;
      top        : 0;
      border-left: 1px solid var(--zaui-brand, #006aff);
      height     : 100%;
      left       : 100px;
    }
  }

  .@{ant-prefix}-table-thead {
    tr th {
      &:last-child {
        .react-resizable-handle {
          display: none;
        }
      }
    }
  }

  .@{ant-prefix}-space {
    gap: var(--zaui-space-size-sm, 8px) !important;
  }

  .@{ant-prefix}-btn-link {
    padding: 0 var(--zaui-space-size-xs, 4px);

    &:first-child {
      padding-left: 0;
    }
  }

  .column-config {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));

    .right-actions {
      display    : flex;
      align-items: center;

      >.@{ant-prefix}-btn {

        &:hover,
        &:visited,
        &:focus {
          color     : unset;
          border    : 1px solid #d9d9d9;
          background: unset;
        }
      }

      .custom-column-btn {
        margin-left: var(--zaui-space-size-sm, 8px);
      }
    }
  }

  .pro-table-empty {
    margin: var(--zaui-space-size-lg, 32px) 0;
    color: rgba(0, 0, 0, 0.25);
    font-size: var(--zaui-font-size-md, 14px);
    text-align: center;

    .empty-image {
      height: 80px;

      img {
        height: 100%;
      }
    }
  }

  .@{ant-prefix}-table .@{ant-prefix}-table-thead>tr>th {
    border-bottom: 0;
    white-space  : nowrap;
    background   : var(--zaui-table-header-bg, #f2f3f5);

    .pro-table-th-cell {
      width        : 100%;
      overflow     : hidden;
      white-space  : nowrap;
      text-overflow: ellipsis;
    }

    &::before {
      width: 0 !important;
    }

    &.react-resizable {
      &::before {
        width: 1px !important;
      }
    }

    .pro-table-tooltip {
      display    : inline-flex;
      align-items: center;

      .icon-tip {

        div {
          width : 14px;
          height: 14px;

          svg {
            margin-left: 8px;
            width      : 14px;
            height     : 14px;
            fill       : #909090;
          }
        }
      }
    }
  }

  .@{ant-prefix}-table.@{ant-prefix}-table-bordered {
    .@{ant-prefix}-table-thead>tr>th {
      border-bottom: 1px solid #f0f0f0;
    }

    .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-placeholder)>td {
      border-bottom: 1px solid #f0f0f0;
    }

    .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
      border-bottom: 1px solid #f0f0f0;
    }
  }

  .@{ant-prefix}-table-tbody .@{ant-prefix}-table-placeholder {
    background: var(--zaui-base-bg, #ffffff) !important;
  }

  .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-placeholder)>td {
    border-bottom: 0;
  }

  .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
    border-bottom: 0;
  }

  .react-resizable {
    position       : relative;
    background-clip: padding-box;

    .@{ant-prefix}-table-filter-trigger {
      margin-right: 0;
    }
  }

  .react-resizable-handle {
    position: absolute;
    right   : -5px;
    bottom  : 0;
    z-index : 1;
    width   : 10px;
    height  : 100%;
    cursor  : col-resize;

    &::before {
      content   : '';
      position  : absolute;
      left      : 50%;
      top       : 50%;
      width     : 1px;
      height    : 18px;
      background: #DCDCDC;
      transform : translateY(-50%);
    }

    &.active::before,
    &:hover::before {
      content    : '';
      position   : absolute;
      left       : 50%;
      height     : 100%;
      bottom     : 0;
      border-left: 5px solid var(--zaui-brand, #006aff);
    }
  }

  .@{ant-prefix}-table-tbody tr td .@{ant-prefix}-checkbox-wrapper-checked.checkbox-disabled {
    pointer-events: none;
    cursor        : not-allowed;
    opacity       : 0.5;
  }

  .@{ant-prefix}-pagination-options-quick-jumper input {
    border    : unset;
    background: #FAFAFA;
    min-width : 32px;
    height    : 32px;
  }

  .@{ant-prefix}-pagination .@{ant-prefix}-pagination-item-active a {
    color        : #ffffff;
    background   : var(--zaui-brand, #006aff) !important;
    border-radius: var(--zaui-border-radius, 4px);
  }

  .pro-table-footer {
    &.no-page {
      margin-top: var(--zaui-space-size-md, 16px);
    }

    &.has-page {
      margin: -50px 0 var(--zaui-space-size-md, 16px) 0;
    }
  }

  .@{ant-prefix}-table-summary {
    background-color: var(--zaui-table-header-bg, #f2f3f5);

    .@{ant-prefix}-table-cell {
      font-weight     : 500;
      background-color: var(--zaui-table-header-bg, #f2f3f5);
      border          : none;
    }
  }
}

.@{ant-prefix}-dropdown-placement-bottomLeft {
  .@{ant-prefix}-dropdown-menu-vertical.@{ant-prefix}-dropdown-menu-light {

    .@{ant-prefix}-dropdown-menu-item-only-child {
      &:hover {
        background: rgba(0, 106, 255, 0.08);
      }
    }
  }
}