.#{$table_v2} {
  --table-border-color: #{map.get($conf_table, 'border-color')};
  --table-border-color: #{map.get($conf_table, 'border-color')};
  --table-border: var(--border-width) solid var(--table-border-color);
  --table-text-color: #{map.get($conf_table, 'font-color')};
  --table-header-text-color: #{map.get($conf_table, 'th-font-color')};
  --table-row-hover-bg-color: #{map.get($conf_table, 'td-bg-color-hover')};
  --table-current-row-bg-color: #{map.get($conf_table, 'highlight-color')};
  --table-header-bg-color: #{map.get($conf_table, 'th-bg-color')};
  --table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
  --table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);

  font-size: var(--font-md);
  * {
    box-sizing: border-box;
  }
  &:not(.is-dynamic) .table-v2-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  &.is-dynamic .table-v2-row {
    overflow: hidden;
    align-items: stretch
  }

  &.is-dynamic .table-v2-row .table-v2-row-cell {
    overflow-wrap: break-word;
  }

  &.table-v2-root {
    position: relative;
    &:hover .table-v2-main .#{$virtual_scrollbar} {
      opacity: 1;
      z-index: 1;
    }
  }

  .table-v2-main {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    overflow: hidden;
    top: 0;
    background-color: var(--bg-content);
    left: 0;
    .vl-horizontal,
    .vl-vertical {
      z-index: 2;
    }
  }

  .table-v2-left {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    overflow: hidden;
    top: 0;
    background-color: var(--bg-content);
    left: 0;
    box-shadow: 2px 0 4px 0 rgba(0, 0, 0, .06);
    .#{$virtual_scrollbar} {
      opacity: 0;
    }
    .horizontal,
    .vertical {
      z-index: -1;
    }
  }

  .table-v2-right {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    overflow: hidden;
    top: 0;
    background-color: var(--bg-content);
    right: 0;
    box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .06);
    .#{$virtual_scrollbar} {
      opacity: 0;
    }
    .horizontal,
    .vertical {
      z-index: -1;
    }
  }

  .table-v2-header-row {
    -webkit-padding-end: var(--table-scrollbar-size);
    padding-inline-end: var(--table-scrollbar-size);
  }

  .table-v2-row {
    -webkit-padding-end: var(--table-scrollbar-size);
    padding-inline-end: var(--table-scrollbar-size);
  }

  .table-v2-header-wrapper {
    overflow: hidden;
  }

  .table-v2-header {
    position: relative;
    overflow: hidden;
  }

  .table-v2-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  .table-v2-empty {
    position: absolute;
    left: 0;
  }

  .table-v2-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
  }

  .table-v2-header-row {
    display: flex;
    border-bottom: var(--table-border);
  }

  .table-v2-header-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    background-color: var(--table-header-bg-color);
    color: var(--table-header-text-color);
    font-weight: 700;
    &.is-align-center {
      justify-content: center;
      text-align: center;
    }
    &.is-align-right {
      justify-content: flex-end;
      text-align: right;
    }
    &.is-sortable {
      cursor: pointer;
    }
    &:hover .#{$icon} {
      display: block;
    }
  }

  .table-v2-sort-icon {
    transition: opacity, display .3;
    opacity: .6;
    display: none;
    &.is-sorting {
      display: block;
      opacity: 1
    }
  }

  .table-v2-row {
    border-bottom: var(--table-border);
    display: flex;
    align-items: center;
    transition: background-color .3;
    &.is-hovered {
      background-color: var(--table-row-hover-bg-color);
    }
    &:hover {
      background-color: var(--table-row-hover-bg-color);
    }
  }

  .table-v2-row-cell {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 8px;
    &.is-align-center {
      justify-content: center;
      text-align: center;
    }
    &.is-align-right {
      justify-content: flex-end;
      text-align: right;
    }
  }

  .table-v2-expand-icon {
    margin: 0 4px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    svg {
      transition: transform .3;
    }
    &.is-expanded svg {
      transform: rotate(90deg);
    }
  }
}