@use '../../_styles/mixin.scss' as *;

.o-table {
  position: relative;

  // 以下边框宽度用于指示尺寸计算
  /* 水平外边框宽度 */
  --h-frame-border-width: 0px;
  /* 垂直外边框宽度 */
  --v-frame-border-width: 0px;
  /* 水平内边框宽度 */
  --h-border-width: 0px;

  table {
    width: 100%;
    border-spacing: 0;
  }

  thead {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
      // 利用背景图回根据dpr缩放，避免dpr>1时1px渲染放大
      background-size: 100% 1px;
    }
    // ios的table不兼容定位relative
    @supports (-webkit-overflow-scrolling: touch) {
      &:after {
        display: none;
      }
      th {
        border-bottom: var(--table-border);
      }
    }
  }

  th,
  td {
    box-sizing: border-box;
  }

  th,
  .o-table-column-as-header {
    text-align: left;
    font-weight: 600;
    background-color: var(--table-head-bg);
    padding: var(--table-head-cell-padding);
    font-size: var(--table-head-text-size);
    line-height: var(--table-head-text-height);
    color: var(--table-head-color);
    height: var(--table-head-cell-height);
  }

  td {
    padding: var(--table-cell-padding);
    font-size: var(--table-text-size);
    line-height: var(--table-text-height);
    background-color: var(--table-bg-color);
    color: var(--table-cell-color);
    height: var(--table-cell-height);
  }

  .o-table-row-disabled {
    td {
      background-color: var(--table-disabled-bg-color);
      color: var(--table-disabled-cell-color);
    }
  }

  th:first-child,
  td:first-child {
    padding-left: var(--table-edge-padding);
  }
  th:last-child,
  td:last-child {
    padding-right: var(--table-edge-padding);
  }
}

.o-table-stripe {
  tbody:not(:has([rowspan])) tr:not(.o-table-highlight) {
    &:nth-child(even) td {
      // 由于有透明度，导致固定列时无法遮挡下方单元格，故使用背景图片，原背景色依旧生效
      background-image: linear-gradient(to right, var(--table-stripe-bg-color), var(--table-stripe-bg-color));
    }
  }
}

td.o-table-highlight,
.o-table-highlight td {
  @media (hover: hover) {
    background-color: var(--table-row-hover);
  }
  @media (hover: none) {
    background-color: var(--table-row-active);
  }
}

.o-table-wrap {
  border-radius: var(--table-radius);
  overflow: hidden;
}

// border
.o-table {
  // 存在合并单元格的表头始终要分割线
  thead:has([rowspan]),
  thead:has([colspan]) {
    --h-border-width: var(--table-border-width);
    tr:not(:last-child) th:not(.o-table-last-header-row-cell) {
      border-bottom: var(--table-border);
    }
    th {
      border-left: var(--table-border);
    }
    th.o-cell-first-col {
      border-left: none;
    }
  }
}

.o-table-border-all,
.o-table-border-frame {
  border: var(--table-border);
  --h-frame-border-width: var(--table-border-width);
  --v-frame-border-width: var(--table-border-width);
}
.o-table-border-all,
.o-table-border-row {
  --h-border-width: var(--table-border-width);

  td {
    border-bottom: var(--table-border);
  }
}

.o-table-border-all,
.o-table-border-frame,
.o-table-border-row {
  tr.o-row-last {
    td {
      border-bottom-color: transparent;
    }
  }
  td.o-cell-last-row {
    border-bottom-color: transparent;
  }
}

.o-table-border-all,
.o-table-border-column {
  td {
    border-right: var(--table-border);

    &.o-cell-last-col {
      border-right-color: transparent;
    }
  }
}

// tip
.o-table-tip-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  color: var(--table-tip-color);
  min-height: var(--table-body-min-height);
}
.o-table-loading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--table-loading-mask);
  color: var(--table-loading-color);
  border-radius: var(--table-radius);
}

.o-table-loading-label {
  margin-left: 8px;
}