@keyframes error-huxi {
  0%,
  66.66% {
    background-color: transparent;
  }
  33.33%,
  100% {
    background-color: rgba(255, 77, 79, 0.3);
  }
}

@border-color: #ccc;

.table-pannel {
  position: relative;
  user-select: none;
  display: flex;
  flex-direction: column;
  &.has-border {
    th,
    td {
      border: 1px solid @border-color;
    }
    // &::before{
    //   content: '';
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   bottom: 0;
    //   border-left: 1px solid @border-color;
    // }
    .divider-line{
      display: block;
      max-width: 100%;
      border-bottom: 1px solid #ddd;
      transform: translateY(-1px);
    }
  }
  &.readonly,
  .readonly-row,
  .readonly-cell,
  .disable-edit-row {
    .sort-handel,
    .select-down-icon,
    .select-remove-icon {
      display: none !important;
    }
  }
  &:not(.has-border) tr {
    th.selected::after,
    td.selected::after {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
  &.is-anywhere-selected {
    tr {
      th.selected::after,
      td.selected::after {
        border: var(--selected-border-width) solid var(--selected-border-color);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
  &.stripe-table{
    tbody>tr:not(:hover):nth-child(even):not(.selected){
      td:not(.selected){
        background-color: #fafafa;
      }
    }
  }
  &.loading{
    min-height: 80px;
  }
  .divider-line{
    display: none;
  }
  &.width-fill{
    table{
      min-width: 100%;
    }
  }
  &::after{
    content: "";
    display: block;
    flex: 1;
    min-height: 0;
    min-width: 0;
  }
  .pointer{
    cursor: pointer;
  }
  .table-warp {
    overflow: auto;
    // height: 100%;
    // max-height: inherit;
    max-width: 100%;
    // flex: 1;
  }
  table {
    border-collapse: collapse;
    user-select: none;
    text-align: left;
  }
  .t-head {
    background-color: #eee;
  }
  .th-cell {
    position: relative;
    display: inline-flex;
    flex: 1;
    width: 100%;
  }
  .handel-resize {
    position: absolute;
    right: -5px;
    top: 0;
    height: 100%;
    width: 10px;
    z-index: 100;
    cursor: col-resize;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .handel-resize .iconfont {
    display: block;
    transform: rotate(90deg) scaleY(0.5);
    color: #bbb;
    width: 100%;
  }
  th:last-child {
    .handel-resize {
      right: 0;
    }
  }
  .row-expanded,
  .row-check,
  .row-index {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #eee;
    position: relative;
    text-align: center;
    &th{
      padding-left: 0 !important;
    }
  }
  tbody, tfoot{
    .row-expanded,
    .row-check,
    .row-index{
      background-color: #fff;
    }
  }
  &:not(.stripe-table) {
    .row-expanded,
    .row-check,
    .row-index{
      background-color: #f5f5f5;
    }
  }
  .row-check .ant-checkbox-input{
    height: inherit !important;
  }
  .row-expanded{
    color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    &.open{
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .filter-icon{
    font-size: 1.1em;
    margin-left: 4px;
    margin-top: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sort-handel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(100, 100, 100, 0.1);
    color: #999;
    font-size: 10px;
    display: flex;
    align-items: center;
    opacity: 0;
    cursor: pointer;
    width: 10px;
    height: 100%;
    object-fit: contain;
  }
  .row-index:hover .sort-handel {
    opacity: 1;
  }
  .selected-row,
  .selected-row td {
    background-color: var(--selected-bg-color);
  }
  th,
  td {
    box-sizing: border-box;
    position: relative;
    padding: 0;
    min-height: 24px;
    line-height: 23px;
    &.error::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 8;
      border: 1px solid #e70000;
      // background-color: rgba(255, 77, 79, 0.3);
      // animation: error-huxi 700ms ease-out;
    }
  }
  
  .td-cell {
    display: flex;
    align-items: center;
    content-visibility: auto;
    contain-intrinsic-size: auto 23px;
    min-width: 100%;
    * {
      max-width: 100%;
      min-width: 0;
    }
    & > * {
      flex: 1;
    }
    &.left {
      justify-content: flex-start;
    }
    &.center {
      justify-content: center;
    }
    &.right {
      justify-content: flex-end;
    }
  }
  .th-cell,
  .td-cell {
    padding-left: 3px;
    padding-right: 3px;
    box-sizing: border-box;
  }
  .drag-core {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--selected-border-color);
    width: 6px;
    height: 6px;
    cursor: crosshair;
    z-index: 11;
    display: none !important;
  }

  tr {
    // transition: background 50ms linear;
    &.disable-edit-row {
      // opacity: 0.5 !important;
      cursor: not-allowed;
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, .65);
    }
    &:not(.empty):hover {
      background-color: var(--hover-bg-color);
      &:not(.selected){
        .row-expanded,
        .row-check,
        .row-index{
          background-color: var(--hover-bg-color);
        }
      }
      
    }
    th.selected,
    td.selected {
      background-color: var(--selected-bg-color) !important;
    }
    &.selected-row{
      .row-expanded,
      // .row-check,
      .row-index{
        background-color: var(--selected-bg-color);
      }
    }
    th.selected::after,
    td.selected::after {
      content: "";
      position: absolute;
      left: -1px;
      right: -1px;
      top: -1px;
      bottom: -1px;
      pointer-events: none;
      z-index: 9;
    }
    &.first-selected {
      .sticky,
      .sticky td,
      .sticky th{
        &::before{
          border-top: none;
        }
      }
      th.selected::after,
      td.selected::after {
        border-top: var(--selected-border-width) solid
          var(--selected-border-color);
      }
    }
    .selected.has-rowspan-last-tr-td::after,
    &.last-selected td.selected::after,
    &.last-selected th.selected::after {
      
      border-bottom: var(--selected-border-width) solid
        var(--selected-border-color);
    }
    .selected.first-selected::after {
      border-left: var(--selected-border-width) solid
        var(--selected-border-color);
    }
    .selected.last-selected::after {
      border-right: var(--selected-border-width) solid
        var(--selected-border-color);
    }
    &:first-child {
      td.selected::after {
        top: -0.5px;
      }
    }
    
    &.last-selected td.selected::before,
    &.last-selected th.selected::before{
      border-bottom-width: 0px;
    }
    
  }
  td {
    .ant-input-affix-wrapper,
    .ant-input-number,
    .select,
    select,
    input,
    textarea {
      border: none !important;
      outline: none;
      background-color: transparent;
      font-size: 1em;
      resize: none;
      color: #000 !important;
      width: 100%;
      padding: 0 !important;
      box-sizing: border-box;
      height: 23px !important;
      line-height: 21px !important;
      box-shadow: none !important;
    }
    input {
      padding-right: 2px;
      padding-left: 1px;
      &::placeholder,
      &::input-placeholder {
        color: rgba(0, 0, 0, 0.4) !important;
      }
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      &[type="number"] {
        -moz-appearance: textfield;
      }
    }
  }
  .ant-input-number-handler-wrap {
    display: none !important;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  td {
    &.disabled{
      background-color: rgba(0, 0, 0, 0.05);
      cursor: not-allowed;
    }
    .select-down-icon,
    .select-remove-icon {
      // opacity: 0;
    }
    .ant-select {
      height: 21px;
      .ant-select-selector {
        border: none !important;
        background-color: transparent !important;
        padding: 0 !important;
        height: inherit;
        box-shadow: none !important;
      }
      .ant-select-arrow {
        // opacity: 0;
        inset-inline-end: 4px;
      }

      &.ant-select-open .ant-select-selection-item {
        color: inherit !important;
      }
    }
    &:hover .ant-select {
      .ant-select-arrow {
        opacity: 1;
      }
    }
    &:hover .select-down-icon,
    &:hover .select-remove-icon {
      opacity: 1;
    }
  }
  .ant-select-dropdown {
    z-index: 10;
    .ant-select-item-option-selected {
      background-color: #007fff !important;
    }
  }

  .sticky {
    position: sticky;
    z-index: 10;
    &:not(.t-head)::before,
    th::before{
      content: "";
      position: absolute;
      left: -1px;
      right: -1px;
      top: -1px;
      bottom: -1px;
      border-right: 1px solid @border-color; 
      border-left: 1px solid @border-color; 
      pointer-events: none;
      z-index: 8; 
    }
    &>tr{
      &:first-child>th::before{
        border-top: 1px solid @border-color;
      }
      &>th::before{
        border-bottom: 1px solid @border-color;
      }
    }
    &:last-child::before,
    &>tr>th:last-child::before{
      right: 0;
      left: 0;
      border-right: 0px;
      border-left: 0px;
    }

    &.sticky-left-chosed,
    &.sticky-left-index,
    &.sticky-left-extend {
      padding-left: 0;
      text-align: center;
      left: 0px;
    }
    &.sticky-left-chosed.sticky-left-index,
    &.sticky-left-chosed.sticky-left-extend,
    &.sticky-left-extend.sticky-left-index {
      left: 40px;
    }
    &.sticky-left-chosed.sticky-left-index.sticky-left-extend {
      left: 80px;
    }
    &.sticky-left {
      left: 0px;
    }
    &.sticky-right {
      right: -1px;
    }
    &.sticky-top {
      top: 0px;
      z-index: 13;
    }
    &.sticky-bottom {
      bottom: -1px;
      z-index: 13;
    }

    &+.selected::after{
      left: -0.5px;
    }
  }
  &:not(.stripe-table) {
    .sticky{
      &,
      th{
        background-color: #eee;
      }
    }
  }
  &:not(.has-border) {
    .sticky {
      &:not(.t-head)::before,
      th::before{
        border: none;
      }
      &>tr{
        &:first-child>th::before,
        &>th::before{
          border: none;
        }
      }
    }
  }

  tr:not(.disable-edit-row) .disabled {
    color: rgba(0, 0, 0, .65) !important;
    cursor: not-allowed !important;
    // background-color: #f5f5f5;
    // background-color: rgba(0, 0, 0, 0.02) !important;
  }
  .placeholder {
    color: rgba(0, 0, 0, 0.4);
  }
  .ant-dropdown-placement-topLeft {
    .options-box {
      transform: translateY(-100%);
    }
  }
  .ant-dropdown {
    z-index: 10;
  }
  .sorter-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 4px;
    cursor: pointer;
    &::after,
    &::before {
      content: "";
      display: block;
      border: 6px solid transparent;
    }
    &::before {
      border-bottom-color: #bbb;
      border-top: none;
      margin-bottom: 1px;
    }
    &::after {
      border-top-color: #bbb;
      border-bottom: none;
    }
    &.ascend::before {
      border-bottom-color: rgba(0, 127, 255, 0.8);
    }
    &.descend::after {
      border-top-color: rgba(0, 127, 255, 0.8);
    }
  }

  .ant-pagination{
    text-align: right;
    margin: 14px 0;
    font-size: 12px;
    .ant-pagination-item{
      border-radius: 2px;
    }
    .ant-select,
    .ant-select-selector,
    .ant-select-dropdown,
    .ant-select-item-option
    {
      font-size: inherit;
    }
    .ant-select-selector{
      border-radius: 2px;
    }
    .ant-select-item{
      text-align: left;
      border-radius: 2px;
    }
    .ant-select-item-option-selected{
      background-color: #e6f7ff !important;
    }
  }

  &:not(.auto-row-height) {
    th,
    td{
      height: 24px;
      line-height: 23px;
    }
    .input-wap{
      display: flex;
      height: 23px;
      line-height: 20px;
    }
    .overflow-text {
      overflow: hidden; /* 确保超出容器的内容被裁剪 */
      white-space: nowrap; /* 确保文本在一行内显示 */
      text-overflow: ellipsis;
      max-width: 100%;
      display: inline-block;
    }
    .td-cell,
    .th-cell{
      white-space: nowrap; /* 确保文本在一行内显示 */
      *{
        overflow: hidden; /* 确保超出容器的内容被裁剪 */
        white-space: nowrap; /* 确保文本在一行内显示 */
        text-overflow: ellipsis;
      }
    }
  }

  .ant-spin{
    max-width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .6);
  }

  .pagination-warp{
    max-width: 100%;
  }
}

.edit-table-tooptip-card{
  .ant-tooltip-content{
    transform: translateY(12px);
  }
  
}
.edit-table-actions {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1051;
  min-width: 156px;
  // border: 1px solid #ddd;
  border-radius: 2px;
  padding: 2px;
  background-color: #fff;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  .action-input {
    width: 40px;
    height: 21px;
    margin: 0 10px;
    line-height: 21px;
    input {
      text-align: center;
      line-height: 21px;
      height: 21px;
      padding: 0 1px;
    }
  }
}
.edit-table-action-list {
  cursor: pointer;
  border-radius: 2px;
  padding: 4px 10px !important;
  margin: 1px 0;
  display: flex;
  height: unset !important;
  align-items: center;
  border: none !important;
  box-shadow: none !important;
  .cypress-handel{
    width: 2px;
    height: 2px;
  }
  &:not(.disable):hover {
    background-color: #e9f4fa;
    color: #000;
  }
  &.disable {
    background-color: transparent !important;
    cursor: not-allowed !important;
    .ant-form-item-control-input-content,
    .input {
      opacity: 0.45;
    }
  }
  .ant-form {
    width: 100%;
    line-height: 1;
    text-align: left;
  }
  .ant-form-item {
    width: 100%;
    margin-inline-end: 0px !important;
    .ant-form-item-control-input {
      min-height: 0 !important;
    }
    .ant-form-item-explain-error {
      font-size: 0.9em;
    }
  }
  .ant-input-number-handler-wrap{
    display: none !important;
  }
}
.edit-table-hidden-text-box{
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
  .edit-table-hidden-text {
    position: absolute;
    height: 0;
    overflow: hidden;
    display: block;
    max-width: unset !important;
  }
}
.edit-table-filter.ant-dropdown{
  z-index: 15;
}
.edit-table-filter-panel{
  background-color: #fff;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  min-width: 80px;
  padding: 10px;
  .ant-checkbox-group,
  .ant-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .footer-btns {
    display: flex;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    margin-top: 10px;
    font-size: 10px;
    border-top: 1px solid #eee;
    gap: 20px;
    button{
      border-radius: 0 !important;
      font-size: 12px;
    }
    .ant-btn-default{
      background-color: transparent !important;
    }
  }
}

.edit-table-validate-tooltip{
  .ant-tooltip-content{
    transform: translateY(12px);
  }
  .ant-tooltip-arrow::before,
  .ant-tooltip-inner{
    // background-color: #f1b828;
  }
}