//
// Tables - Hypermarket Theme
// --------------------------------------------------

caption {
  color: $gray;
  text-align: left;
  @include padding($table-cell-padding null $table-cell-padding null);
}
th { text-align: left; }

// Baseline styles
table {
  width: 100%;
  max-width: 100%;
  @include margin(null null $line-height-computed null);
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        line-height: $line-height-base;
        vertical-align: top;
        border-bottom: 1px solid $table-border-color;
        @include padding($table-cell-padding);
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px !important;
    }
  }

  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid $table-border-color;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid $table-border-color;
  }
}

// Responsive tables
//
.table-responsive {
  overflow-x: auto;
  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    @include margin(null null ($line-height-computed * 0.75) null);
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    //border: 1px solid $table-border-color;

    // Tighten up spacing
    > table {
      @include margin(null null 0 null);

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > table {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }

    }
  }
}

// Striped rows
.table-striped {
  > tbody > tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }
}

// Without Borders
.table-no-border {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border-bottom: 0;
      }
    }
  }
}
