index.less

@import '../../style/mixins/clearfix.less';
@import '../../style/mixins/ellipsis.less';
@import '../../style/mixins/reset.less';

@import './border.less';
@import './fixed.less';
@import './radius.less';
@import './size.less';

.@{table-prefix} {
  .reset-component-new();
  .reset-color();
  .clearfix();

  max-width: 100%;

  &-container {
    position: relative;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 30px;
      transition: box-shadow var(--ix-transition-duration-fast);
      content: '';
      pointer-events: none;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    .cdk-virtual-scroll-holder {
      overflow-y: scroll;
    }
  }

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

  th {
    color: @table-head-color;
    background-color: @table-head-background-color;
    font-weight: @table-head-font-weight;

    &:not(:last-child)::before {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      background-color: @table-head-separator-color;
      transform: translateY(-50%);
      content: '';
    }
  }

  thead > tr > th[colspan]:not([colspan='1']) {
    text-align: center;
  }

  td {
    transition: background var(--ix-transition-duration-fast);

    // TODO: Nest Table
  }

  tr {
    &:hover {
      > td {
        background-color: @table-body-row-background-color-hover;
      }
    }

    &.@{table-prefix}-alert-row,
    &.@{table-prefix}-empty-row {
      &:hover {
        > td {
          background-color: var(--ix-background-color);
        }
      }
    }
  }

  &-cell {
    position: relative;
    text-align: start;
    overflow-wrap: break-word;
  }

  &-cell-align {
    &-center {
      text-align: center;

      .@{table-prefix}-cell-triggers {
        justify-content: center;
      }
    }

    &-end {
      text-align: end;

      .@{table-prefix}-cell-triggers {
        justify-content: end;
      }
    }
  }

  &-cell-ellipsis {
    .ellipsis();

    .@{table-prefix}-cell-title {
      .ellipsis();
    }

    .@{table-prefix}-cell-content {
      display: block;
      .ellipsis();
    }
  }

  &-cell-title {
    position: relative;
    z-index: 1;
  }

  &-cell-scroll-bar {
    box-shadow: 0 1px 0 1px @table-head-background-color;
  }

  &-pagination {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;

    > * {
      flex: none;
    }

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

    &-center {
      justify-content: center;
    }

    &-end {
      justify-content: flex-end;
    }
  }

  // --------- Expandable ---------
  &-expandable-trigger {
    color: @table-expandable-icon-color;
    background-color: transparent;
    border-style: none;
    outline: none;
    cursor: pointer;

    &-disabled {
      cursor: unset;
    }

    & + * {
      margin-left: @spacing-xs;
    }
  }

  & tr&-expanded-row {
    & > td {
      background-color: @table-expandable-background-color;

      > .@{table-prefix} {
        margin: -4px 28px;
      }
    }
    &:hover > td {
      background-color: @table-expandable-background-color-hover;
    }
  }

  // --------- Selectable ---------
  &-selectable-trigger {
    margin-left: @spacing-xs;
    color: @table-head-icon-color;
    cursor: pointer;
  }

  & tr&-row-selected {
    &:hover > td {
      background-color: @table-body-row-background-color-hover;
    }
    & > td {
      background: @table-body-row-background-color-selected;
    }
  }

  // --------- Sortable ---------

  &-cell-sortable {
    cursor: pointer;
  }

  &-sortable-trigger {
    display: inline-flex;
    flex-direction: column;
    font-size: 10px;
    padding: 0 4px;

    .@{icon-prefix} + .@{icon-prefix} {
      margin-top: -0.2em;
    }
  }

  // --------- Filterable ---------

  &-filterable-trigger {
    font-size: 16px;
    padding: 0 1px;

    &-footer {
      padding: 8px 16px;
      text-align: right;

      .@{button-prefix} + .@{button-prefix} {
        margin-left: 8px;
      }
    }
  }

  &-filterable-menu-label {
    display: inline-flex;

    &-content {
      margin-left: 8px;
    }
  }

  &-sortable-trigger,
  &-filterable-trigger {
    display: flex;
    margin: 0 -8px 0 4px;
    align-items: center;
    justify-content: center;
    user-select: none;
    border-radius: @table-border-radius;
    color: @table-head-icon-color;
    transition: color var(--ix-transition-duration-fast), background var(--ix-transition-duration-fast);
    cursor: pointer;

    &:hover {
      background-color: @table-head-icon-background-color-hover;
    }

    &-active {
      color: @table-head-icon-color-active;
    }
  }

  &-cell-triggers {
    display: flex;
    align-items: center;

    .@{table-prefix}-cell-title {
      flex: auto;
    }
  }

  &-auto-height {
    display: flex;
    flex-direction: column;
    height: 100%;

    .@{spin-prefix} {
      height: 100%;

      &-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
    }

    .@{table-prefix} {
      &-container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
      }

      &-content {
        flex-basis: 0;
        height: 0;
        flex-grow: 1;
      }

      &-fixed-holder {
        flex-shrink: 0;
      }
    }

    .cdk-virtual-scroll {
      flex: 1 1 0;
    }
  }

  &-empty&-auto-height,
  &-empty&-full-height {
    .cdk-virtual-scroll-filler,
    .cdk-virtual-scroll-content,
    table {
      height: 100%;
    }
  }

  &-sticky {
    &-holder {
      position: sticky;
      z-index: 3;
      background-color: var(--ix-background-color);
    }

    &-scrollbar {
      position: sticky;
      bottom: 0;
      z-index: 3;
      background-color: @scrollbar-track-background-color;
      border-radius: @scrollbar-track-border-radius;
      box-shadow: @scrollbar-track-box-shadow;

      &:hover {
        transform-origin: center bottom;
      }

      &-thumb {
        height: @scrollbar-height;
        background-clip: padding-box;
        background-color: @scrollbar-thumb-background-color;
        border: @scrollbar-thumb-border solid transparent;
        border-radius: @scrollbar-thumb-border-radius;
        box-shadow: @scrollbar-thumb-box-shadow;

        &:hover {
          background-color: @scrollbar-thumb-hover-background-color;
        }

        &&-active {
          background-color: @scrollbar-thumb-active-background-color;
        }
      }
    }
  }

  // chrome 83: virtual + fixed column
  .cdk-virtual-scroll-content {
    display: block;
  }
}