@import (reference) '../../Style/base.less';
@import './cssVariables.less';

@table-prefix-cls: ~'@{prefix}-table';

@table-cls-tr: ~'@{table-prefix-cls}-tr';
@table-cls-th: ~'@{table-prefix-cls}-th';
@table-cls-td: ~'@{table-prefix-cls}-td';

.expandBtn() {
  width: var(--table-size-expand-button);
  height: var(--table-size-expand-button);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-font-size-expand-button);
  border-radius: var(--table-border-radius-expand-button);
  outline: none;
  transition: background-color 0.1s linear;
  padding: 0;
  cursor: pointer;
  border: var(--table-border-expand-button);
  box-sizing: border-box;

  &:hover {
    color: var(--table-color-expand-icon_hover);
    border-color: var(--table-color-expand-icon_hover);
  }
}

.@{table-prefix-cls}-th-item {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}

.@{table-prefix-cls}-cell {
  display: flex;
  align-items: center;
}

// .@{table-prefix-cls}-th-item.@{table-prefix-cls}-col-has-filter {
//   padding-right: 28px;
// }

// .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter {
//   padding-right: 0;
// }

// .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter .@{table-prefix-cls}-cell-with-sorter {
//   padding-right: 28px;
// }

// .@{table-prefix-cls}-col-has-sorter {
//   padding: 0;
// }

// .@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
//   padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
//   cursor: pointer;
// }

.@{table-cls-td} {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
  font-size: var(--table-size-font-size);
}

.@{table-cls-th} {
  font-size: var(--table-size-font-header-size);
}

.@{table-prefix-cls}-footer {
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}

// expand row in fixed
.@{table-prefix-cls}-expand-fixed-row {
  margin: calc(-1 * var(--table-size-padding-horizontal)) calc(-1 * var(--table-size-padding-vertical));
  padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
}

// sub table
// .@{table-prefix-cls}-expand-content .@{table-cls-td} .@{table-prefix-cls} {
//   margin: -9px -16px -10px;
// }

// // editor row
// .@{table-prefix-cls}-editable-row {
//   .@{table-prefix-cls}-cell-wrap-value {
//     padding: var(--table-size-padding-horizontal) var(--table-size-padding-vertical);
//   }
// }

.@{table-prefix-cls} {
  position: relative;

  //   // spin
  //   .@{prefix}-spin {
  //     display: block;
  //   }

  //   > .@{prefix}-spin > .@{prefix}-spin-children::after {
  //     z-index: 2;
  //   }

  //   // footer
  //   &-footer {
  //     border-radius: 0 0 @table-border-radius @table-border-radius;
  //   }

  // box-shadow of the fixed column on the left
  &-scroll-position-right &-col-fixed-left-last::after,
  &-scroll-position-middle &-col-fixed-left-last::after {
    box-shadow: var(--table-shadow-left);
  }

  // box-shadow of the fixed column on the right
  &-scroll-position-left &-col-fixed-right-first::after,
  &-scroll-position-middle &-col-fixed-right-first::after {
    box-shadow: var(--table-shadow-right);
  }

  // box-shadow on the left side of the scroll table
  &:not(&-has-fixed-col-left) {
    &.@{table-prefix-cls}-scroll-position-right,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::before {
        box-shadow: var(--table-shadow-left);
      }
    }
  }

  // box-shadow on the right side of the scroll table
  &:not(&-has-fixed-col-right) {
    &.@{table-prefix-cls}-scroll-position-left,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::after {
        box-shadow: var(--table-shadow-right);
      }
    }
  }

  &-layout-fixed {
    .@{table-prefix-cls}-content-inner {
      overflow-x: auto;
      overflow-y: hidden;
    }
  }

  thead > &-tr > &-th {
    border-bottom: 1px solid var(--table-color-border);
  }

  table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
    word-break: break-all;
    border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;

    thead tr:first-child {
      th:first-child {
        border-radius: var(--table-border-radius) 0 0 0;
      }

      th:last-child {
        border-radius: 0 var(--table-border-radius) 0 0;
      }
    }
  }

  &-th {
    box-sizing: border-box;
    text-align: left;
    color: var(--table-color-text-header-cell);
    background-color: var(--table-color-bg-header-cell);
    line-height: var(--table-line-height-base);
    font-weight: var(--table-font-weight-header-text);

    &[colspan] {
      text-align: center;
    }
  }

  &-td {
    box-sizing: border-box;
    text-align: left;
    background-color: var(--table-color-bg-body-cell);
    border-bottom: 1px solid var(--table-color-border);
    line-height: var(--table-line-height-base);
  }

  &-th-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  //   &-th&-col-sorted {
  //     background-color: @table-color-bg-header-sorted-cell;
  //   }

  //   &-td&-col-sorted {
  //     background-color: @table-color-bg-body-sorted-cell;
  //   }

  &-col-fixed-left,
  &-col-fixed-right {
    position: sticky;
    z-index: 1;
  }

  &-col-fixed-left-last::after,
  &-col-fixed-right-first::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: var(--table-border-width);
    width: var(--table-size-shadow-wrapper-width);
    pointer-events: none;
    transform: translateX(-100%);
    transition: box-shadow 0.1s linear;
    box-shadow: none;
  }

  &-col-fixed-left-last::after {
    left: unset;
    transform: translateX(100%);
    right: 0;
  }

  //   &-cell-text-ellipsis {
  //     overflow: hidden;
  //     white-space: nowrap;
  //     text-overflow: ellipsis;
  //   }

  //   &-cell-text-ellipsis &-cell-with-sorter {
  //     display: flex;
  //     align-items: center;
  //   }

  //   &-cell-text-ellipsis &-th-item-title {
  //     flex: 1;
  //     overflow: hidden;
  //     white-space: nowrap;
  //     text-overflow: ellipsis;
  //   }

  //   // useless
  //   &-editable-row {
  //     .@{table-prefix-cls}-cell-wrap-value {
  //       border: @table-border-width solid @table-color-editable-body-cell-border;
  //       border-radius: @table-border-radius;
  //       transition: all @transition-duration-1 @transition-timing-function-linear;
  //       cursor: pointer;
  //     }

  //     &:hover {
  //       .@{table-prefix-cls}-cell-wrap-value {
  //         border: @table-border-width solid @table-color-border;
  //       }
  //     }
  //   }

  //   &-cell {
  //     word-break: break-all;
  //     width: 100%;

  //     &:has(> &-indent)::after {
  //       content: '';
  //       display: block;
  //       clear: both;
  //     }

  //     &-indent {
  //       height: 1px;
  //       float: left;
  //       + .@{table-prefix-cls}-cell-wrap-value {
  //         float: left;
  //       }
  //     }
  //   }

  // Expand
  &-expand-icon-cell {
    button {
      .expandBtn();
    }
  }

  &-cell-expand-icon {
    display: flex;

    button {
      .expandBtn();
      margin-right: 8px;
    }
  }

  .@{table-prefix-cls}-expand-td {
    padding-left: 15px;
  }
  //   &-cell-expand-icon-hidden {
  //     display: inline-block;
  //     width: @table-size-expand-button;
  //     height: @table-size-expand-button;
  //     margin-right: @table-spacing-expand-button-margin-right;
  //   }

  //   &-expand-content .@{table-cls-td} {
  //     background-color: @table-color-bg-expand-content;
  //   }

  &-expand-fixed-row {
    position: sticky;
    left: 0;
    box-sizing: border-box;
  }

  //   &-expand-content .@{table-cls-td} & {
  //     .@{table-prefix-cls}-container {
  //       border: none;
  //     }

  //     .@{table-cls-th} {
  //       border-bottom: @table-border-width @table-border-style @table-color-border;
  //     }

  //     .@{table-cls-th},
  //     .@{table-cls-td} {
  //       background-color: @table-color-bg-expand-content;
  //     }

  //     .@{table-prefix-cls}-pagination {
  //       margin-bottom: @table-spacing-pagination-margin;
  //     }
  //   }

  // Selection
  // & &-th&-operation &-th-item,
  // & &-td&-operation {
  //   padding-left: @table-spacing-selection-padding-horizontal;
  //   padding-right: @table-spacing-selection-padding-horizontal;
  // }

  &-th&-operation &-th-item,
  &-td&-operation {
    text-align: center;
    padding: 0;
  }

  &-checkbox .@{prefix}-checkbox,
  &-radio .@{prefix}-radio {
    padding-left: 0;
    justify-content: center;
  }

  //   // colgroup selection
  //   &-selection-col {
  //     width: @table-size-selection-col-width;
  //   }

  //   &-expand-icon-col {
  //     width: @table-size-expand-icon-col-width;
  //   }

  //   &-radio &-th-item,
  //   &-checkbox &-th-item,
  //   div&-selection-col &-th-item,
  //   div&-expand-icon-col &-th-item {
  //     padding: 0;
  //   }

  //   &-th-item {
  //     position: relative;
  //     transition: background-color @transition-duration-1 @transition-timing-function-linear;
  //   }

  //   &-cell-mouseenter {
  //     background-color: @table-color-bg-header-sorted-cell_hover;
  //   }

  //   &-cell-next-ascend &-sorter-icon {
  //     .@{prefix}-icon-caret-up {
  //       color: @table-color-header-sorter-icon_next;
  //     }
  //   }

  //   &-cell-next-descend &-sorter-icon {
  //     .@{prefix}-icon-caret-down {
  //       color: @table-color-header-sorter-icon_next;
  //     }
  //   }

  &-sorter-wrapper {
    display: flex;
    align-items: center;
  }

  &-sorter {
    display: flex;
    flex-direction: column;
    margin-left: 6px;
    cursor: pointer;
    color: var(--sorter-color);
  }

  &-sorter-active {
    color: var(--sorter-active-color);
  }

  &-sorter-top {
    position: relative;
    width: 10px;
    height: 10px;
    top: 1px;
  }

  &-sorter-bottom {
    position: relative;
    width: 10px;
    height: 10px;
    top: -1px;
  }

  //   &-sorter&-sorter-direction-one {
  //     vertical-align: 0;
  //   }

  //   &-sorter-icon {
  //     position: relative;
  //     height: @table-size-header-sorter-icon-height;
  //     line-height: @table-size-header-sorter-icon-height;
  //     width: @table-font-size-header-sorter-icon;
  //     overflow: hidden;

  //     .@{prefix}-icon-caret-up,
  //     .@{prefix}-icon-caret-down {
  //       position: absolute;
  //       top: 50%;
  //       font-size: @table-font-size-header-sorter-icon;
  //       color: @table-color-header-sorter-icon;
  //       transition: all @transition-duration-1 @transition-timing-function-linear;
  //     }

  //     .@{prefix}-icon-caret-up {
  //       top: @table-position-header-sorter-icon-up-top;
  //       left: 0;
  //     }

  //     .@{prefix}-icon-caret-down {
  //       top: @table-position-header-sorter-icon-down-top;
  //       left: 0;
  //     }

  //     &&-active {
  //       svg {
  //         color: @table-color-header-sorter-icon_active;
  //       }
  //     }
  //   }

  &-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: transparent;
    line-height: 1;
    vertical-align: 0;
    cursor: pointer;
    transition: all 0.1s linear;
    color: var(--filter-color);

    &-active {
      color: var(--filter-active-color);
    }
  }

  /* ---- Table sorter, filter, checkbox, radio (End) ---- */

  &-container {
    position: relative;
    border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
  }

  &-header {
    border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
  }

  &-content-scroll {
    width: 100%;
    overflow: hidden;

    .@{table-prefix-cls}-content-inner {
      width: auto;
    }
  }

  &-header {
    scrollbar-color: transparent transparent;
    background-color: var(--table-color-bg-header-cell);

    &::-webkit-scrollbar {
      background-color: transparent;
    }

    overflow-x: scroll;
    overflow-y: hidden;
  }

  &-body {
    position: relative;
    overflow: auto;
    z-index: 1;
  }

  &-no-data {
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
  }

  //   &-border&-fixed-column &-empty-row &-td:first-child {
  //     border-bottom: 0;
  //     border-left: 0;
  //   }

  &-border {
    .@{table-prefix-cls}-container {
      border-right: 1px solid var(--table-color-border);
      border-top: 1px solid var(--table-color-border);

      &::before {
        content: '';
        position: absolute;
        background-color: var(--table-color-border);
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 0;
        z-index: 2;
      }
    }

    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-left: 1px solid var(--table-color-border);
    }

    .@{table-prefix-cls}-expand-fixed-row {
      border-left: 1px solid var(--table-color-border);
    }

    .@{table-prefix-cls}-footer {
      border: 1px solid var(--table-color-border);
      border-top: 0;
    }
  }

  &-border-cell {
    .@{table-cls-th},
    .@{table-cls-td} {
      border-left: 1px solid var(--table-color-border);
    }
  }

  &-border-header-cell {
    .@{table-cls-th} {
      border-left: 1px solid var(--table-color-border);
    }
  }

  &-border-body-cell {
    .@{table-cls-td} {
      border-left: 1px solid var(--table-color-border);
    }
  }

  // remove the left border on the first column
  &-border-cell:not(&-border) {
    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-left: 0;
    }
  }

  // stripe: true
  &-stripe {
    .@{table-cls-tr}:nth-child(even) .@{table-cls-td} {
      background-color: var(--table-color-bg-body-stripe-row);
    }
  }

  &-hover {
    .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row):hover {
      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
        background-color: var(--table-color-bg-body-row_hover);
      }

      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--table-color-bg-body-row_hover);
          z-index: -1;
        }
      }
    }

    // 展开行的hover效果
    // .@{table-prefix-cls}-expand-content:not(.@{table-prefix-cls}-empty-row):hover
    //   .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
    //   background-color: @table-color-bg-expand-content_hover;
    // }

    // // 去除嵌套子表格的 hover 效果
    // .@{table-prefix-cls}-expand-content .@{table-cls-td} & {
    //   .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row) {
    //     .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
    //       background-color: transparent;
    //     }

    //     .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
    //     .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
    //       &::before {
    //         background-color: transparent;
    //       }
    //     }
    //   }
    // }
  }

  //   // Active row
  //   &-type-radio &-row-checked.@{table-cls-tr} .@{table-cls-td} {
  //     background-color: @table-color-bg-body-row_active;
  //   }

  //   // virtualized
  //   &-virtualized table {
  //     table-layout: fixed;
  //   }

  //   &-virtualized div&-body div&-tr {
  //     display: flex;
  //   }

  //   &-virtualized div&-body div&-td {
  //     display: flex;
  //     align-items: center;
  //     flex: 1;
  //   }

  //   // https://github.com/arco-design/arco-design/issues/695
  //   &-virtualized &-selection-col {
  //     max-width: @table-size-selection-col-width;
  //   }

  //   &-virtualized &-expand-icon-col {
  //     max-width: @table-size-expand-icon-col-width;
  //   }

  //   // summary
  //   div&-tfoot {
  //     width: 100%;
  //     overflow-x: scroll;
  //     background-color: @table-color-bg-tfoot;
  //     scrollbar-color: transparent transparent;
  //     position: relative;
  //     z-index: 1;
  //     box-shadow: 0 -@table-border-width 0 @table-color-border;

  //     &::-webkit-scrollbar {
  //       background-color: transparent;
  //     }
  //   }

  //   &-tfoot &-td {
  //     background-color: @table-color-bg-tfoot;
  //   }
  // }

  .@{table-prefix-cls}-pagination {
    display: flex;
    justify-content: flex-end;

    &-left {
      justify-content: flex-start;
    }

    &-center {
      justify-content: center;
    }

    .@{prefix}-pagination {
      margin-top: var(--table-pagination-margin-top);
    }
  }
}