@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$table-prefix: 'dk-table';

.#{$table-prefix} {
  @include reset-component();
  position: relative;
  width: 100%;

  table {
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    background-color: $table-bg;
  }

  tr {
    padding: 0;
  }

  th {
    padding: $table-cell-padding;
    text-align: inherit;
    font-weight: 600;
    letter-spacing: .08em;
    color: $table-head-color;
    border-top: 1px solid $table-border-color;
    border-bottom: 1px solid $table-border-color;
    background: $table-head-bg;
    font-size: $font-size-sm;
  }


  td {
    padding: $table-cell-padding;
    font-size: $font-size-base;
    border-bottom: 1px solid $table-border-color;
  }

  th,
  td {
    word-break: break-word;
  }


  &-scroll {
    overflow: auto;
    overflow-x: hidden;

    table {
      width: auto;
      min-width: 100%;
    }
  }

  &-title {
    padding: 12px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: $table-border-color;
    font-weight: 600;
    font-size: $font-size-sm;
    color: $gray-600;
  }

  &-header {
    overflow: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &-body {
    position: relative;
    z-index: 9;

    tr {
      &:hover td {
        background-color: $table-hover-bg;
      }
    }
  }

  &-no-data {
    width: 100%;
    padding: 12px;
    text-align: center;
    color: $gray-500;
  }


  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .3s ease;
    border-radius: 0;
    z-index: 10;
  }

  &-fixed-left {
    left: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, .15) 0, rgba(62, 152, 240, 0) 100%);
  }

  &-fixed-right {
    right: 0;
    background-image: linear-gradient(to left, rgba(0, 0, 0, .15) 0, rgba(62, 152, 240, 0) 100%);
  }

  &-position-both {

    .#{$table-prefix}-fixed-left,
    .#{$table-prefix}-fixed-right {
      background-image: none;
    }
  }

  &-position-middle {
    position: relative;
  }

  &-position-left {
    .#{$table-prefix}-fixed-left {
      background-image: none;
    }
  }

  &-position-right {
    .#{$table-prefix}-fixed-right {
      background-image: none;
    }
  }


  &-page {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }
}