@import '../../style/themes';
@import '../../style/mixins';

$table-prefix: x-table;

.#{$table-prefix} {
  @include reset-component();
  
  display: flex;
  flex-direction: column;
  background: $table-bg;

  &-bordered {
    .#{$table-prefix}_header {
      margin-bottom: -17px - $table-border-width;
    }
    .#{$table-prefix}_header, .#{$table-prefix}_body {
      border: $table-border;
    }
    .#{$table-prefix}_td, .#{$table-prefix}_th {
      border-right: $table-border;
      &:last-child {
        border-right: 0;
      }
    }
  }
  &-bottom-bordered {
    .#{$table-prefix}_td, .#{$table-prefix}_th {
      border-bottom: $table-border;
    }
    .#{$table-prefix}_tr {
      &:last-child {
        .#{$table-prefix}_td, .#{$table-prefix}_th {
          border-bottom: 0;
        }
      }
    }
  }

  &_table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    box-sizing: border-box;
  }
  &_header {
    @include reset-scroll(8px, 0);
    width: 100%;
    box-sizing: border-box;
    overflow: scroll;
  }
  &_body {
    @include reset-scroll();
    overflow: auto;
  }
  &_tr, tr {
    box-sizing: border-box;
  }
  &_td, &_th, td, th {
    padding: $padding-md $padding-sm;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    &-fix-left {
      position: sticky;
      &-last {
        box-shadow: inset -10px 0 10px -10px $shadow-color;
      }
    }
    &-fix-right {
      position: sticky;
      &-first {
        box-shadow: inset 10px 0 10px -10px $shadow-color;
      }
    }
    &-align-center {
      text-align: center;
    }
    &-align-right {
      text-align: right;
    }
  }
  &_th, th {
    background: $table-th-bg;
  }
  &_td, td {
    background: $table-td-bg;
  }

}