@import "../lib.less";

.@{veui-prefix}-table {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid @dls-table-cell-border-color;
  font-variant-numeric: tabular-nums;

  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
  }

  &-main {
    overflow: auto;

    /* To workaround an edge case which triggers composition problems on Firefox */
    transform-style: preserve-3d;
  }

  &-cell {
    display: flex;
    line-height: @dls-line-height-1;
    align-items: center;
  }

  &-loading {
    z-index: 3;
  }

  th,
  td {
    border: 1px @dls-table-cell-border-color;
    text-align: left;
    .veui-transition(background-color, border-color);
  }

  [role="columnheader"] {
    border-bottom-style: solid;
    padding: @dls-table-header-padding-y @dls-table-header-padding-x;
    background-color: @dls-table-header-background-color;
    font-weight: @dls-table-header-font-weight;
    border-color: @dls-table-header-border-color;
    color: @dls-table-header-font-color;
  }

  &-cell-interactive:hover {
    background-color: @dls-table-header-background-color-hover;
  }

  &-cell-sortable {
    cursor: pointer;
  }

  [role="cell"] {
    border-top-style: solid;
    padding: @dls-table-cell-padding-y @dls-table-cell-padding-x;
    background-color: @dls-table-cell-background-color;
    color: @dls-table-cell-font-color;
  }

  tbody tr:first-child td {
    border-top-style: none;
  }

  &:not(&-has-bordered-body) {
    [role="cell"] {
      border-left-color: transparent;
    }
  }

  &-has-bordered-header {
    [role="columnheader"]:not(.@{veui-prefix}-table-cell-first),
    [role="cell"].@{veui-prefix}-table-cell-sticky-right {
      border-left-style: solid;
    }

    &:not(.@{veui-prefix}-table-hit-right) {
      [role="cell"].@{veui-prefix}-table-cell-sticky-right {
        border-left-color: @dls-table-cell-border-color;

        & ~ .@{veui-prefix}-table-cell-sticky-right {
          border-left-color: transparent;
        }
      }
    }
  }

  &-has-bordered-body {
    [role="cell"] {
      &:not(.@{veui-prefix}-table-cell-first) {
        border-left-style: solid;
        border-left-color: @dls-table-cell-border-color;
      }
    }
  }

  &-no-data {
    height: @dls-table-body-height-no-data;
  }

  &-no-data &-cell {
    justify-content: center;
  }

  tr:hover {
    td {
      background-color: @dls-table-cell-background-color-hover;
    }

    .@{veui-prefix}-table-no-data {
      background-color: @dls-table-cell-background-color;
    }
  }

  .@{veui-prefix}-button,
  .@{veui-prefix}-link {
    & + .@{veui-prefix}-button,
    & + .@{veui-prefix}-link {
      margin-left: @dls-table-action-spacing;
    }
  }

  &-cell-center &-cell {
    justify-content: center;
  }

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

  &-cell-select:first-child,
  &-cell-expand:first-child,
  & &-cell-first {
    padding-left: @dls-table-padding-x;
  }

  & &-cell-last {
    padding-right: @dls-table-padding-x;
  }

  &-cell-select:first-child,
  &-cell-expand:first-child {
    border-left: none !important;
  }

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

  &-overflow-shadow-right,
  &-overflow-shadow-left {
    .absolute(0, _);
    pointer-events: none;
    z-index: 2;
    .veui-transition(box-shadow);
  }

  &-overflow-shadow-edge {
    z-index: 3;
  }

  &-overflow-shadow-right {
    right: -20px;
    box-shadow: @dls-table-overflow-shadow-right;
  }

  &-overflow-shadow-left {
    left: -20px;
    box-shadow: @dls-table-overflow-shadow-left;
  }

  &-bordered &-overflow-shadow-left {
    left: -19px;
  }

  &-hit-right &-overflow-shadow-right,
  &-hit-left &-overflow-shadow-left {
    box-shadow: none;
  }

  &-bordered &-cell-sticky-left {
    &::after {
      content: "";
      .absolute(0, -1px, 0, _);
      width: 1px;
      background-color: @dls-table-cell-border-color;
    }
  }

  &-bordered thead &-cell-sticky-left {
    &::after {
      background-color: @dls-table-header-border-color;
    }
  }

  &-hit-left:not(&-has-bordered-body) {
    [role="cell"]::after {
      content: none;
    }
  }

  & &-cell-hero {
    position: relative;
    z-index: 3;
    padding: 0;
  }

  &-cell-hero &-cell {
    position: sticky;
    right: 0;
    left: 0;
    padding: @dls-table-cell-padding-y @dls-table-padding-x;
  }

  &-has-bordered-body &-cell-hero &-cell {
    left: 1px;
  }

  & &-cell-expand {
    .@{veui-prefix}-button {
      flex-grow: 0;
    }
  }

  &-expander {
    .veui-transition(transform);

    &-collapse {
      transform: rotate(180deg);
    }
  }

  & &-expander {
    .dls-icon-size(@dls-table-icon-size-aux);
  }

  &-header-op {
    margin-left: @dls-table-cell-content-spacing;
  }

  &-header-icon {
    color: @dls-table-header-icon-color;
    .veui-transition(color);

    .@{veui-prefix}-button:hover &,
    .@{veui-prefix}-hover & {
      color: @dls-table-header-icon-color-hover;
    }

    .@{veui-prefix}-button:active &,
    th:active .@{veui-prefix}-hover & {
      color: @dls-table-header-icon-color-active;
    }

    &.@{veui-prefix}-disabled {
      color: @dls-table-header-icon-color-disabled;
    }

    .dls-icon-size(@dls-table-icon-size);

    &-active {
      color: @dls-button-font-color-text-strong;

      .@{veui-prefix}-button:hover &,
      .@{veui-prefix}-hover & {
        color: @dls-button-font-color-text-strong-hover;
      }

      .@{veui-prefix}-button:active &,
      th:active .@{veui-prefix}-hover & {
        color: @dls-button-font-color-text-strong-active;
      }
    }
  }

  &-cell-right &-header-icon {
    .margin(_, @dls-table-cell-content-spacing, _, 0);
  }

  &-sorter {
    .@{veui-prefix}-icon {
      margin: 0;
    }

    .@{veui-prefix}-table-sorter-icon-sort {
      opacity: 0;
    }

    .@{veui-prefix}-table-sorter-icon-asc,
    .@{veui-prefix}-table-sorter-icon-desc {
      position: absolute;
      .veui-transition(color);
    }

    &.@{veui-prefix}-hover {
      color: @dls-table-header-icon-color-hover;
    }
  }

  &-main,
  &-fixed-header,
  &-fixed-footer {
    width: 100%;
  }

  &-fixed-header,
  &-fixed-footer {
    position: relative;
    overflow: hidden;
    z-index: 2;
  }

  &-fixed-header {
    box-shadow: @dls-table-overflow-shadow-top;
  }

  &-fixed-footer {
    box-shadow: @dls-table-overflow-shadow-bottom;
  }

  &-hit-top &-fixed-header,
  &-hit-bottom &-fixed-footer {
    box-shadow: none;
  }

  & &-sub-row {
    td {
      background-color: @dls-table-sub-row-background-color;
    }

    &:hover {
      td {
        background-color: @dls-table-sub-row-background-color-hover;
      }
    }
  }

  &-gutter {
    .@{veui-prefix}-table thead & {
      border-left-color: @dls-table-header-background-color;
    }

    .@{veui-prefix}-table tbody &,
    .@{veui-prefix}-table tfoot & {
      border-left-color: @dls-table-cell-background-color;
    }
  }

  &-col-expand {
    width: dls-sum(@dls-table-icon-size-aux, @dls-table-header-padding-x * 2);

    &:first-child {
      width: dls-sum(
        @dls-table-icon-size-aux,
        @dls-table-header-padding-x,
        @dls-table-padding-x
      );
    }
  }

  &-bordered &-col-expand {
    &:first-child {
      width: dls-sum(
        @dls-table-icon-size-aux,
        @dls-table-header-padding-x,
        @dls-table-padding-x,
        1px
      );
    }
  }

  &[ui~="m"] {
    font-size: @dls-table-font-size-m;
    border-radius: @dls-table-border-radius-m;

    .@{veui-prefix}-table {
      &-col-select {
        width: dls-sum(@dls-checkbox-size-m, @dls-table-header-padding-x * 2);

        &:first-child {
          width: dls-sum(
            @dls-checkbox-size-m,
            @dls-table-header-padding-x,
            @dls-table-padding-x
          );
        }
      }

      &-bordered &-col-select {
        width: dls-sum(
          @dls-checkbox-size-m,
          @dls-table-header-padding-x,
          @dls-table-padding-x,
          1px
        );
      }
    }
  }

  &[ui~="s"] {
    font-size: @dls-table-font-size-s;
    border-radius: @dls-table-border-radius-s;

    .@{veui-prefix}-table {
      &-col-select {
        width: dls-sum(@dls-checkbox-size-s, @dls-table-header-padding-x * 2);

        &:first-child {
          width: dls-sum(
            @dls-checkbox-size-s,
            @dls-table-header-padding-x,
            @dls-table-padding-x
          );
        }
      }

      &-bordered &-col-select {
        width: dls-sum(
          @dls-checkbox-size-s,
          @dls-table-header-padding-x * 2,
          1px
        );

        &:first-child {
          width: dls-sum(
            @dls-checkbox-size-s,
            @dls-table-header-padding-x,
            @dls-table-padding-x,
            1px
          );
        }
      }
    }
  }

  &[ui~="loose"] {
    [role="columnheader"] {
      .padding(@dls-table-header-padding-y-loose, _);
    }

    [role="cell"] {
      .padding(@dls-table-cell-padding-y-loose, _);
    }
  }

  &[ui~="compact"] {
    [role="columnheader"] {
      .padding(@dls-table-header-padding-y-compact, _);
    }

    [role="cell"] {
      .padding(@dls-table-cell-padding-y-compact, _);
    }
  }

  &[ui~="crowded"] &-cell-filterable {
    padding-right: dls-sum(
      @dls-table-header-padding-x,
      @dls-table-cell-padding-x-extra
    );

    .@{veui-prefix}-table-header-filter {
      width: 0;
      opacity: 0;
      margin-right: -@dls-table-cell-content-spacing;
      .veui-transition(opacity, color, background-color, border-color);
    }

    &.@{veui-prefix}-table-cell-filter-open,
    &.@{veui-prefix}-table-cell-filter-active,
    &:hover {
      .@{veui-prefix}-table-header-filter {
        opacity: 1;
      }
    }
  }
}