// Tables
// -----------------------------------------------------------------------------
// scss-lint:disable SelectorDepth

table {
  background-color: $table-bg;
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;

  text-align: center;
}


// Baseline styles

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $line-height-base;

  font-size: $table-font-size;

  // Cells
  th,
  td {
    padding: $table-cell-padding;
    border: 0 solid $table-border-color;

    line-height: $line-height-base-ratio;
    vertical-align: top;
  }

  // Rows
  tr {
    border: 0 solid $table-border-color;

    &:not(:first-child) {
      border-top-width: $table-border-width;
    }
  }

  // Table header
  thead {
    border-bottom: $table-section-border-width solid $table-section-border-color;

    th {
      @include font-family-circular();

      font-weight: $table-thead-font-weight;
      vertical-align: bottom;
    }
  }

  // Row headers
  tbody th {
    font-weight: $table-row-header-font-weight;
  }

  // Account for multiple tbody instances
  tbody + tbody {
    border-top: $table-section-border-width solid $table-section-border-color;
  }

  // Table footer
  tfoot tr:first-child {
    th,
    td {
      padding-top: $line-height-base / 2;
    }
  }
}


// Condensed table padding
.table-condensed {
  th,
  td {
    padding: $table-condensed-cell-padding;
  }
}


// Bordered version
//
// Add borders between all the columns.

.table-bordered {
  th,
  td {
    &:not(:first-child) { border-left-width: $table-border-width; }
  }
}

// Borderless version
//
// Removes borders between rows

.table-borderless {
  thead tr:last-of-type th {
    padding-bottom: $line-height-base / 2;
  }

  thead,
  tbody,
  tbody + tbody,
  tr,
  th,
  td {
    border: 0;
  }

  th,
  td {
    &:first-child {
      padding-left: 0;
    }
  }

  tbody + tbody tr:first-child {
    th,
    td {
      padding-top: $line-height-base / 2;
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  tbody tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }

  &.table-responsive-cards,
  &.table-responsive-flip {
    @media (max-width: $table-responsive-breakpoint - 1) {
      tbody tr:nth-of-type(odd) {
        background-color: transparent; // Undo row striping
      }
    }
  }
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    background-color: $table-bg-hover;
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

// Generate the contextual variants
@include table-row-variant('active',  $table-bg-active);
@include table-row-variant('success', $state-success-bg, $semantic-color-success );
@include table-row-variant('info',    $state-info-bg,    $semantic-color-info    );
@include table-row-variant('warning', $state-warning-bg, $semantic-color-warning );
@include table-row-variant('danger',  $state-danger-bg,  $semantic-color-danger  );



// Responsive tables
// -------------------------------------------------------------------------------------------------

.table-responsive-overflow,
.table-responsive-cards,
.table-responsive-flip {
  th,
  td {
    // Ensure empty cells don't collapse
    &:empty::before {
      content: 'N/A';
      visibility: hidden;
    }
  }
}


// Responsive overflow table
//
// Wrap your tables in `.table-responsive-overflow` and we'll make them mobile
// friendly by enabling horizontal scrolling for smaller devices.

.table-responsive-overflow {
  &-caption,
  &-tfoot,
  &-fixed-column,
  &-spacer {
    @media screen and (min-width: $table-responsive-breakpoint) {
      display: none;
    }
  }

  @media screen and (max-width: $table-responsive-breakpoint - 1) {

    &-caption {
      margin-bottom: 0;
    }

    &-tfoot {
      margin-top: -$line-height-base; // Match .table bottom margin
    }

    &-wrapper {
      position: relative;

      margin-bottom: $line-height-base;
    }

    &-scrollable {
      margin-right: -$grid-gutter-width / 2;
      padding-right: $grid-gutter-width / 2;

      overflow-y: hidden;
      overflow-x: auto;

      // Ensure the content doesn't wrap
      th,
      td {
        white-space: nowrap;
      }

      caption,
      tfoot {
        // Non-scrolling versions are added with JS, so we can hide the originals
        @include sr-only;
      }
    }

    // Hack to account for padding bug
    // see: http://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par
    &-spacer {
      // scss-lint:disable ImportantRule
      width: $grid-gutter-width / 2;
      visibility: hidden;
      border: 0 !important;
    }

    &.has-fixed-column &-scrollable {
      // scss-lint:disable NestingDepth
      td,
      th {
        &:first-child {
          color: transparent;
        }

        &:nth-child(2) {
          border-left-color: transparent;
        }
      }
    }

    &:not(.has-fixed-column) &-scrollable {
      margin-left:  -$grid-gutter-width / 2;
      padding-left:  $grid-gutter-width / 2;
    }

    .table {
      margin-bottom: 0;
    }

    &-fixed-column {
      position: absolute;
      top: 0;
      left: 0;
      background-color: $body-bg;
      border-right: 1px solid $table-section-border-color;
      width: auto;
    }
  }
}



// Responsive card & flip tables

.table-responsive-cards,
.table-responsive-flip {
  // @media (min-width: $screen-sm-min) {
  //   font-size: .9em;
  // }

  // @media (min-width: $bp-marge) {
  //   font-size: 1em;
  // }

  @media (max-width: $table-responsive-breakpoint - 1) {
    &,
    thead,
    tbody,
    caption,
    tr,
    th,
    td {
      display: block;
    }

    tbody {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
    }

    tbody + tbody {
      margin-top: $line-height-base / 2;
    }
  }
}


// Responsive cards table
//
// Turns each row into its own card on a horizontal carousel

.table-responsive-cards {
  // scss-lint:disable NestingDepth, SelectorDepth, ImportantRule

  @media (max-width: $table-responsive-breakpoint - 1) {
    // We use flex layout to rearrange tfoot to the bottom
    display: flex;
    flex-direction: column;

    thead {
      @include sr-only;
    }

    tfoot {
      // Force tfoot to the bottom of the table (tfoot can appear before tbody)
      // see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
      order: 1;
    }

    tbody {
      // display: table-row;
      // display: flex;

      border-width: 0 !important;

      margin-left:  -$grid-gutter-width / 2;
      margin-right: -$grid-gutter-width / 2;
      padding-left:  $grid-gutter-width / 2;
      padding-right: $grid-gutter-width / 2;

      tr {
        display: inline-block;
        background-color: transparent !important;

        border: $table-border-width solid $table-section-border-color;

        margin-right: $grid-gutter-width / 2;
        margin-bottom: $table-border-width; // Leaves room for bottom border (bug on iOS)

        vertical-align: top;
        white-space: normal;

        &:not(:only-child) {
          max-width: 90%;
        }

        &:only-child {
          width: 100%;
        }

        &:last-of-type {
          margin-right: 0;
        }

        // Card heading
        th[scope="row"] {
          @include font-family-circular();

          background-color: $table-cards-heading-bg;
          padding: $table-cards-heading-padding !important;
          border-bottom: $table-section-border-width solid $table-section-border-color;

          font-weight: $table-cards-heading-font-weight;
          text-align: center;
        }

        // Card rows
        td {
          background-color: $table-cards-body-bg;
        }

        td[data-title] {
          display: table-row;

          &::before,
          &::after {
            display: table-cell;
            padding: $table-cards-row-padding;
          }

          // Row label
          &::before {
            content: attr(data-title) ':';

            font-size:   $table-cards-label-font-size;
            font-weight: $table-cards-label-font-weight;
            line-height: $line-height-tight-ratio;
            text-align: right;
          }

          &::after {
            content: ' ';
          }
        }
      }
    }

    &.table-striped {
      tbody tr:nth-of-type(odd) {
        background: white;
      }
    }
  }
}


// Responsive flip table (╯°□°）╯︵ ┻━┻
//
// Flips the axis of the table (so rows are now columns) and makes the tbody
// scrollable

.table-responsive-flip {
  // scss-lint:disable NestingDepth, SelectorDepth, ImportantRule

  @media (max-width: $table-responsive-breakpoint - 1) {
    @include clearfix;

    // The following ensures the overflow bleeds to the edge of its container
    margin-right: -$grid-gutter-width / 2;
    width: auto;
    max-width: 200%;


    caption,
    tfoot {
      padding-right: $grid-gutter-width / 2;
    }

    th,
    td {
      padding: $table-flip-cell-padding !important; // Ensure padding overrides borderless and condensed styles
      line-height: $line-height-base;
    }

    tr {
      border-top: 0;
    }

    // Row headers
    thead {
      float: left;
      border: 0; // Reset borders
      border-right: $table-section-border-width solid $table-section-border-color;

      th {
        @include font-family-proxima-nova();

        border-bottom: $table-border-width solid transparent; // To match tbody's borders

        font-size: $font-size-xs;
        text-align: right;
      }
    }

    tfoot {
      // Force tfoot to the bottom of the table (tfoot can appear before tbody)
      // see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
      float: left;
      clear: left;
    }

    tbody {
      // Account for slight overhang
      margin-right: 1px;
    }

    // Columns
    tbody tr {
      display: inline-block;

      &:last-of-type {
        min-width: 100%;
        padding-right: $grid-gutter-width / 2;
      }

      th,
      td {
        &:not(:first-child) {
          border-top-width: $table-border-width;
        }
      }

      // Column heading
      th {
        @include font-family-circular();

        font-weight: $table-thead-font-weight;
      }
    }

    &.table-borderless {
      thead th {
        border: 0;
      }
    }

    &.table-bordered {
      tbody {
        tr:first-child {
          th,
          td {
            border-left: 0;
          }
        }

        th:first-child,
        td:first-child {
          border-left-width: $table-border-width;
        }
      }
    }

    &.table-striped {
      tbody td:nth-of-type(odd) {
        background-color: $table-bg-accent;
      }
    }
  }
}