.dv-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-spacing: 0;
  border-collapse: collapse;
  border: $border-width solid rgba(255, 255, 255, 0);

  &.header-border {
    .dv-table-header {
      background: transparent !important;
      border-bottom: $border-width-large solid $dv-dark-border-color;
    }
  }

  colgroup {
    col {
      overflow: hidden;
    }
  }

  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  &-header {
    background: -webkit-linear-gradient(right, rgba($dv-dark-primary-color1, 0), rgba($dv-dark-primary-color1, 1), rgba($dv-dark-primary-color1, 0));

    .dv-table-cell {
      height: $component-size;
      display: flex;
      align-items: center;
      justify-content: center;

      .caret-wrapper {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 24px;
        overflow: initial;
        vertical-align: middle;
        cursor: pointer;

        .sort-caret {
          left: $text-span;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          vertical-align: middle;

          &.ascending {
            margin-bottom: 2px;
            border-bottom-color: $dv-dark-primary-text-color;
          }

          &.descending {
            border-top-color: $dv-dark-primary-text-color;
          }
        }
      }

      &.ascending .sort-caret.ascending {
        border-bottom-color: $primary-color;
      }

      &.descending .sort-caret.descending {
        border-top-color: $primary-color;
      }
    }
  }

  &-body-wrap {
    flex: 1;
    overflow-y: scroll;
    position: relative;

    .dv-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &-body {
  }

  &.scrollable {
    .dv-table-body {
    }

    .dv-table-body-wrap {
      overflow-y: hidden;
    }
  }

  &-cell {
    display: block;
    height: $component-size;
    padding: 0 $content-padding;
    overflow: hidden;
    line-height: $component-size;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: center;

    .dv-table-cell-ranking-index {
      display: inline-flex;
      width: $font-size-large;
      height: $font-size-large;
      align-items: center;
      justify-content: center;
      border-radius: $block-border-radius;
      background: $dv-dark-primary-color1;
      font-size: $font-size-small;
      font-weight: bold;

      &.ranking-1 {
        background-color: $rank-first;
      }
      &.ranking-2 {
        background-color: $rank-second;
      }
      &.ranking-3 {
        background-color: $rank-third;
      }
    }
  }

  tbody {

  }

  th {
    font-weight: bold;
    color: $dv-dark-primary-color;

    .dv-table-cell {
      font-size: $font-size;
      font-weight: bold;
    }
  }

  td {
    font-size: $font-size;
    color: $dv-dark-primary-text-color;
  }

  td,
  th {
    overflow: hidden;
    font-weight: normal;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: $border-width solid rgba(255, 255, 255, 0);
  }

  tbody {
    tr {
      &:nth-child(2n) {
        background: -webkit-linear-gradient(right, rgba($dv-dark-highlight-background, 0), rgba($dv-dark-highlight-background, 1), rgba($dv-dark-highlight-background, 0));
      }

      td {
        overflow: hidden;
      }
    }
  }

  &.plain {
    .dv-table-header {
      background: rgba($dv-dark-primary-color1, 0.7);

      th {
        color: $dv-dark-primary-text-color;
      }
    }

    tbody {
      tr {
        &:nth-child(2n) {
          background: rgba($dv-dark-highlight-background, 0.3);
        }
      }
    }
  }

  td {
    color: $dv-dark-primary-text-color;
  }
}