$table-header-row-height: 48px !default;
$table-row-height: 64px !default;
$table-row-horizontal-padding: $spacing-md !default;

$table-header-font-size: 14px !default;
$table-header-color: $dark-gray-3 !default;

$table-background: $light !default;
$table-hover-color: inherit !default;
$table-hover-bg: $light-gray-2 !default;

/**
 * Native HTML table structure
 */
table.suka-table {
  border-spacing: 0;
  margin: 0;
  background: $table-background;
  border-radius: $border-radius;

  &.suka-table--striped {
    tbody tr:nth-child(odd) {
      background: $light-gray-3;
    }
  }

  &.suka-table--slim {
    tr {
      height: $table-row-height/2;
    }
  }

  .skeleton__text {
    margin-bottom: 0;
  }

  &.suka-table--full-width {
    width: 100%;
  }

  &.suka-table--hover tr.suka-row:hover {
    color: $table-hover-color;
    background-color: $table-hover-bg;
  }

  th:first-of-type, td:first-of-type {
    padding-left: $table-row-horizontal-padding;
  }

  th:not(:first-of-type), td:not(:first-of-type) {
    padding-left: $table-row-horizontal-padding/2;
  }

  th:last-of-type, td:last-of-type {
    padding-right: $table-row-horizontal-padding;
  }

  th:not(:last-of-type), td:not(:last-of-type) {
    padding-right: $table-row-horizontal-padding/2;
  }

  &.suka-table--bordered {
    border: 1px solid $light-gray-2;

    td, th {
      border-bottom: 1px solid $light-gray-2;
    }

    tr:last-of-type td{
      border-bottom: none;
    }

  }

  th {
    text-align: left;
    font-weight: $font-weight-bold;
    color: $table-header-color;
    font-size: $table-header-font-size;
  }
}

tr.suka-header-row {
  height: $table-header-row-height;
  color: $table-header-color;
  font-size: $table-header-font-size;

  .skeleton__text {
    width: 4rem;
  }
}

tr.suka-row, tr.suka-footer-row {
  height: $table-row-height;
}

th.suka-header-cell {
  text-align: left;
  font-weight: $font-weight-bold;
}

td.suka-cell {
  border-bottom: 1px solid $light-gray-2;
}

th.suka-header-cell:first-of-type, td.suka-cell:first-of-type, td.suka-footer-cell:first-of-type {
  padding-left: $table-row-horizontal-padding;
}

th.suka-header-cell:last-of-type, td.suka-cell:last-of-type, td.suka-footer-cell:last-of-type {
  padding-right: $table-row-horizontal-padding;
}


// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.

table.suka-table--responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        // Prevent double border on horizontal scroll due to use of `display: block;`
        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}