@tableScope: ~'@{prefixCls}Table';
@tableFilterScope: ~'@{prefixCls}TableFilter';
@tableActionsScope: ~'@{prefixCls}Actions';
@tableDropdown: ~'@{prefixCls}TableDropdown';
@tableFilterDropdown: ~'@{prefixCls}filterDropDown';

.@{tableScope} {
  // position: relative;
  // overflow-x: hidden;
  padding: @space-6;
  &.isFooterInfo {
    position: relative;
    .scTable-footer--info {
      position: absolute;
      left: 0;
      bottom: 20px;
      padding: 0;
    }
  }
  .scTable-footer--info {
    padding: 10px 0;
    line-height: 30px;
  }
  .tag-filter {
    margin-bottom: 16px;
  }
}
// .disFlex {
//   & + .ant-table-wrapper {
//     margin-top: 8px;
//   }
// }
.@{tableScope}, .ant-table {
  .ant-table-thead > tr > th {
    height: 40px;
    background: @table-header-bg;
    padding: 8px 16px;
  }
  .ant-table-content {
    border-left: 1px solid #F0F0F0;
    border-right: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
  }
  .ant-table-small {
    .ant-table-thead > tr > th {
      height: 30px;
    }
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected):not(.table-disabled) > td {
    background: @table-td-hover;
  }
  .ant-table-tbody > tr.table-disabled:hover  td {
    background: @steps-wait-color!important;
  }
  .ant-table-tbody > tr > td {
    border-bottom: 1px solid @table-border-color;
    box-sizing: border-box;
    padding: 12px 16px;
  }
  .ant-table-tbody > tr {
    &:last-child {
      & > td {
        border-bottom-color: transparent;
      }
    }
  }
  .ant-table-tbody > .ant-table-row:hover > td {
    background: @table-td-hover;
  }
  .ant-table-tbody > .ant-table-row-selected > td {
    background: @table-td-hover;
  }
  .ant-table-thead > tr > th {
    white-space: nowrap;
  }
  .ant-table-thead>tr:first-child>th:first-child,
  .ant-table-thead>tr:first-child>th:last-child
  {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td
  {
    line-height: 22px;
    padding: 12px 16px;
  }
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td
  {
    line-height: 22px;
    padding: 11px 16px;
    &.ant-table-row-expand-icon-cell {
      padding: 11px 8px;
    }
  }
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, 
  .ant-table.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
    padding: 8px 16px;
  }
  .ant-table-middle .ant-table-selection-column {
    width: 48px;
    min-width: 48px;
  }
  .ant-table.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td {
    line-height: 22px;
    padding: 5px 16px;
  }
  .ant-table.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
  .ant-table.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th {
    line-height: 22px;
    padding: 4px 16px;
  }

  .ant-table-small .ant-table-selection-column {
    width: 48px;
    min-width: 48px;
  }
  .sc-down-circle {
    margin-right: 10px;
    cursor: pointer;
    color: @text-color-secondary;
  }
  .sc-up-circle {
    cursor: pointer;
    margin-right: 10px;
    color: @primary-color;
  }
}
.scfilterDropDown {
  &.isLoading {
    display: flex;
    min-width: 117px;
    height: 60px;
    justify-content: center;
    align-items: center;
  }
  .ant-menu-item, .ant-menu-submenu-title {
    white-space: unset;
  }
  .scTableDropdown {
    max-height: 230px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      width: 4px;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.16);
      transition: all .2s ease-in-out;
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 0, 0, 0.26);
      }
    }
  }
}
.@{tableDropdown} {
  .ant-dropdown-menu-item {
    padding: 0;
    .actionBtn {
      padding: 3px 8px;
    }
  }
}
// .ant-table-scroll-position-right .ant-table-cell-fix-right-first:after, 
// .ant-table-scroll-position-right .ant-table-cell-fix-right-last:after, 
// .ant-table-scroll-position-right:not(.ant-table-has-fix-right) .ant-table-container:after {
//   box-shadow: inset -2px 0 8px -8px rgb(0 0 0 / 15%);
// }
// .ant-table-scroll-position-left .ant-table-cell-fix-left-first:after,
// .ant-table-scroll-position-left .ant-table-cell-fix-left-last:after, 
// .ant-table-scroll-position-left:not(.ant-table-has-fix-left) .ant-table-container:before {
//   box-shadow: inset -2px 0 8px -8px rgb(0 0 0 / 15%);
// }

.@{tableFilterScope} {
  display: flex;
  // padding-bottom: 16px;
  // padding-bottom: @space-4;
  justify-content: space-between;
  white-space: nowrap;
  flex-wrap: wrap;

  // & + .ant-table-wrapper {
  //   margin-top: 16px;
  // }
  // & + .disFlex {
  //   margin-top: 16px;
  // }
  &-left {
    display: flex;
    margin-bottom: 16px;
    & > div:last-child {
      margin-left: @space-2;
    }
    .ant-radio-group {
      vertical-align: top;
    }
  }
  .ant-btn-primary {
    padding: 0 16px;
    &.@{tableFilterScope}-addBtns {
      .sc-xinjian {
        margin-right: 6px;
      }
    }
  }
  &-right {
    display: flex;
    margin-bottom: 16px;
    margin-left: auto;
    &.isOnlyRight {
      width: 100%;
      justify-content: flex-end;
      // .ant-input-group {
      //   flex: auto;
      // }
      .ant-input-group {
        flex: 0 0 200px;
      }
    }
    &.isOnlyLeft {
      width: 100%;
      .ant-input-group {
        flex: auto;
      }
    }
    .active-btn + .active-btn {
      margin-left: 8px;
    }
    .ant-input-group + .scTableFilter-active {
      margin-left: 8px;
    }
    .ant-btn {
      line-height: 22px;
      padding: 4px 7px;
      border-color: @border-color-base;
      i {
        color: @text-color-secondary;
      }
      // &:not(.ant-btn-primary) {
      //   margin-left: 8px;
      // }
      // &:not(.ant-btn-primary):visited, &:not(.ant-btn-primary):link {
      //   border-color: @primary-color;
      //   color: @primary-color;
      // }
      // &[ant-click-animating-without-extra-node=true] {
      //   border-color: @primary-color;
      //   color: @primary-color;
      // }
      &:not(.ant-btn-primary):active {
          border-color: @primary-color;
          color: @primary-color;
      }
    }
    .ant-select {
      margin-right: -1px;
      &:hover, &:focus, &:active, &:link {
        z-index: 1;
      }
      &.ant-select-focused {
        z-index: 1;
      }
      & + .scSearchInput {
        .scSearch {
          border-radius: 0 @border-r-3 @border-r-3 0;
        }
      }
    }
    .scSelect {
      margin-right: -1px;
      & + .scSearchInput {
        .scSearch {
          border-radius: 0 @border-r-3 @border-r-3 0;
        }
      }
    }
    

    .ant-select-selector {
      border-radius: @border-r-3 0 0 @border-r-3 !important;
    }
    .scSearch {
      width: 240px;
      height: 32px;
      box-sizing: border-box;
      .ant-input-suffix {
        & > i {
          cursor: pointer;
          color: @text-color-secondary;
        }
        & > .anticon-search {
          display: none;
        }
        & > .anticon-close-circle {
          color: @disabled-color;
          &:hover {
            color: @text-color-secondary;
          }
        }
      }
    }
  }
  &-active {
    display: flex;
    // flex: 1;
  }
  .ant-btn:not(.ant-btn-primary):not([disabled]) {
    &:hover, &:active {
      color: @primary-color;
      i {
        color: @primary-color;
      }
    }
  }
  .scSearchInput {
    display: inline-block;
    position: relative;
    .input-describe {
      position: absolute;
      line-height: 16px;
      color: @error-color;
    }
  }
  // .ant-radio-group-outline.ant-radio-group .ant-radio-button-wrapper {
  //   box-shadow: none;
  //   background: @white-color;
  // }
}
.@{tableActionsScope} {
  height: 22px;
  & > span + .ant-btn-link, 
  & > .ant-btn-link + span,  
  & > .ant-btn-link + .ant-btn-link,
  & > span + span  { 
    position: relative;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: 4px;
      width: 1px;
      height: 16px;
      background: @table-border-color;
    }
  }
  .ant-btn-link {
    padding: 0;
    height: 22px;
    box-sizing: border-box;
  }
  & > span {
    padding: 0 0 0 6px;
    .ant-btn-link {
      padding: 0;
      height: 22px;
      box-sizing: border-box;
    }
    &:first-child {
      padding-left: 0;
    }
  }
  .actionBtn {
    min-width: 117px;
  }
  .ant-btn-link {
    & > span {
      padding: 0 6px 0 8px;
    }
    &:first-child {
      & > span {
        padding-left: 0;
      }
    }
    &.ant-btn-loading {
      min-width: 50px;
      & > span:last-child {
        display: none;
      }
    }
  }
  // .ant-btn-link:not(:last-child) {
  //   position: relative;
  //   &::after {
  //     position: absolute;
  //     content: "";
  //     right: 0;
  //     top: 4px;
  //     width: 1px;
  //     height: 16px;
  //     background: @table-border-color;
  //   }
  // }
  .ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
    padding-left: 0;
  }
}

.ant-pagination-options-size-changer {
  &.ant-select-single {
    .ant-select-selector {
      padding: 0 24px 0 8px;
    }
  }
  &.ant-select-show-arrow .ant-select-selection-item {
    padding-right: 22px;
  }
}
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover,
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter, 
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon{
  background: @table-header-bg;
}

.ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters:hover::before {
  background: transparent;
}
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .anticon-filter.ant-table-filter-open, 
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .ant-table-filter-icon.ant-table-filter-open,
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .anticon-filter:hover {
  background: @table-header-bg;
  color: @primary-color!important;
}
.ant-table-thead > tr > th .anticon-filter, .ant-table-thead > tr > th .ant-table-filter-icon {
  right: auto;
  color: fade(@color-000, 20%);
  text-align: left;
}
// .ant-table-ping-left .ant-table-cell-fix-left-first::after, 
// .ant-table-ping-left .ant-table-cell-fix-left-last::after {
//   box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
// }
// .ant-table-ping-right .ant-table-cell-fix-right-first::after, 
// .ant-table-ping-right .ant-table-cell-fix-right-last::after {
//   box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
// }
.ant-table-cell-fix-left, .ant-table-cell-fix-right {
  z-index: 2;
}

.ant-table-column-sorter-inner {
  .ant-table-column-sorter-up, .ant-table-column-sorter-down {
    &:hover {
      color: @primary-color !important;
    }
  }
  .anticon-caret-up {
    color: @disabled-color;
  }
  .anticon-caret-down {
    color: @disabled-color;
  }
}
.ant-table-filter-icon {
  &:hover {
    color: @primary-color;
  }
}
.ant-menu-vertical > .ant-menu-item, 
.ant-menu-vertical-left > .ant-menu-item, 
.ant-menu-vertical-right > .ant-menu-item, 
.ant-menu-inline > .ant-menu-item, 
.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, 
.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, 
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
  height: auto;
  line-height: 22px;
}
.ant-menu-submenu {
  &::marker {
    display: none;
  }
}
.tdCopy {
  // cursor: pointer;
  span.anticon-copy {
    cursor: pointer;
    color: @primary-color;
  }
  &-prefix {
    padding-right: 6px;
  }
  &-icon {
    // display: none;
    cursor: pointer;
    &:hover {
      & > span {
        color: @link-color1;
      }
    }
    &:active {
      & > span {
        color: @link-color;
      }
    }
    &[disabled] {
      & > span {
        color: @disabled-link-color;
      }
    }
  }
  // &:hover {
  //   .tdCopy-icon {
  //     display: inline-block;
  //   }
  // }
}
.tdCopy {
  span.anticon-copy {
    cursor: pointer;
    color: @primary-color;
  }
  &-prefix {
    padding-right: 6px;
  }
  &-icon {
    cursor: pointer;
    &:hover {
      & > span {
        color: @link-color1;
      }
    }
    &:active {
      & > span {
        color: @link-color;
      }
    }
  }
}
.ellipsisText {
  line-break: 22px;
}
.tableEmpty {
  min-height: 260px;
  padding-top: 45px;
  .tableEmpty-img {
    text-align: center;
    & img {
      width: 98px;
      height: 64px;
      margin: 0 auto;
    }
  }
  &-text {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: fade(@color-000, 40);
    margin-top: -8px;
  }
}

.td_href {
  color: @text-color;
  &.linkBtn {
    color: @primary-color !important;
  }
}
.table-disabled {
  td {
    background: @steps-wait-color;
  }
}
.table-sortUp, .table-sortDown {
  position: absolute;
  display: none;
  padding: 5px 8px;
  line-height: 22px;
  color: @heading-color;
  background: @bg-color;
  border-radius: @border-r-3;
  transform: translateX(110%);
}
.table-sortUp {
  right: 0;
  top: -8px;
}
.table-sortDown {
  right: 0;
  top: -17px;
}

#table-fetch, #usetable {
  & + .vitepress-demo {
    .demo-slot {
      padding: 0;
    }
    table {
      display: table;
    }
  }
}
.ant-table-expand-icon-th, .ant-table-row-expand-icon-cell {
  width: 48px;
  min-width: 48px;
}
// .table-expandedRow, .ant-table-row {
//   & + .ant-table-expanded-row {
//     & > td:first-child {
//       overflow: hidden;
//     }
//   }
// }
.icon-downArrow {
  display: inline-block;
  color: @primary-color;
  transform: rotate(-90deg);
}
.icon-upArrow {
  display: inline-block;
  transform: rotate(90deg);
}
.icon-downArrow, .icon-upArrow {
  font-size: 16px;
  cursor: pointer;
  // margin-right: 8px;
}
// .table-expandedRow {
//   .ant-table-row-cell-break-word {
//     white-space: nowrap;
//   }
// }

.scTableDropdown {
  .ant-dropdown-menu-submenu-popup {
    left: calc(-100% - 10px)!important;
  }
  .ant-tooltip {
    max-width: unset;
  }
}

.container_en {
  .scTableDropdown {
    .ant-dropdown-menu-submenu-popup {
      left: calc(-220px) !important;
    }
    .ant-dropdown-menu-item {
      width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

.ant-table-column-has-filters {
  .ant-table-filter-icon {
    background: #e8f3ff !important;

    .anticon-search {
      width: 12px;
      height: 12px;

      & > svg {
        display: none;
      }
    }
    .anticon-search::after {
      content: '\e663';
      // color: #008cd3;
      color: @text-color-secondary;
      font-family: sc-ui !important;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      font-style: normal;
    }

    &.ant-table-filter-open {
      .anticon-search::after {
        color: @primary-color;
      }
    }
  }

  &:hover,
  &:active,
  &:focus {
    .anticon-search::after {
      color: @primary-color;
    }
  }
}