/*doc
---
title: Tables
name: tables
category: CSS - Tables
---
*/

/*doc
---
title: Basic Example
name: tables_01_example
parent: tables
---

For some rudimentary styling add `.table` to any `<table>`.

This is a most basic requirement for all variants below and will always need to be added.

```htmlexample
<table class="table">
    <thead>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Carl</td>
            <td>Sagan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Stephen</td>
            <td>Hawking</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Elon</td>
            <td>Musk</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: Table Variants
name: tables_02_variants
parent: tables
---

All variants can be combined and mixed/matched by adding their respective classes.

*/

/*doc
---
title: Striped rows
name: tables_02_striped
parent: tables_02_variants
---

For an alternate striping pattern add `.table-striped`

```htmlexample
<table class="table table-striped">
    <thead>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Carl</td>
            <td>Sagan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Stephen</td>
            <td>Hawking</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Elon</td>
            <td>Musk</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: Bordered table
name: tables_03_bordered
parent: tables_02_variants
---

Add `.table-bordered` for borders on all sides and cells.

```htmlexample
<table class="table table-bordered">
    <thead>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Carl</td>
            <td>Sagan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Stephen</td>
            <td>Hawking</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Elon</td>
            <td>Musk</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: Hover rows
name: tables_04_hover
parent: tables_02_variants
---

To enable a hover state on table rows add `.table-hover`.

```htmlexample
<table class="table table-hover">
    <thead>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Carl</td>
            <td>Sagan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Stephen</td>
            <td>Hawking</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Elon</td>
            <td>Musk</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: Condensed table
name: tables_05_condensed
parent: tables_02_variants
---

Add `.table-condensed` for a more compact look.

```htmlexample
<table class="table table-condensed">
    <thead>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Carl</td>
            <td>Sagan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Stephen</td>
            <td>Hawking</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Elon</td>
            <td>Musk</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: States
name: tables_06_states
parent: tables
---

Add a contextual class to any `<tr>` or `<td>` / `<th>` to color individual rows and cells.

These also come with their own hover effects in a `.table-hover`.

Class          | Description
-------------- | -----------
`.has-success` | Indicates a successful or positive action
`.has-info`    | Indicates something informative
`.has-warning` | Indicates a warning
`.has-alert`   | Indicates a dangerous of negative action

```htmlexample
<table class="table table-hover">
    <thead>
        <th>#</th>
        <th>Heading</th>
        <th>Heading</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>default</td>
            <td>Content</td>
        </tr>
        <tr class="has-success">
            <td>2</td>
            <td>.has-success</td>
            <td>Content</td>
        </tr>
        <tr class="has-info">
            <td>3</td>
            <td>.has-info</td>
            <td>Content</td>
        </tr>
        <tr class="has-warning">
            <td>4</td>
            <td>.has-warning</td>
            <td>Content</td>
        </tr>
        <tr class="has-alert">
            <td>5</td>
            <td>.has-alert</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>
```
*/

/*doc
---
title: Responsive tables
name: tables_07_responsive
parent: tables
---

Wrap any `.table` in `.table-responsive` to make tables scroll horizontally.

```htmlexample
<div class="table-responsive">
  <table class="table">
      <thead>
          <th>Heading</th>
          <th>Heading</th>
      </thead>
      <tbody>
          <tr>
              <td>#</td>
              <td>Extremely long content that will surely overflow the table to showcase the scrolling feature. Extremely long content that will surely overflow the table to showcase the scrolling feature.</td>
          </tr>
      </tbody>
  </table>
</div>
```
*/

table td a {
  color: $c-gray-55;
}

body.dark-theme table td a {
  color: $c-dt-table-text;
}

.table {
  width: 100%;
  max-width: 100%;

  background-color: $c-white;

  &.disabled {
    text-decoration: none;
    background-color: #ebebe4;
  }

  > thead,
  > tbody,
  > tfoot {
    > tr {
      >th, > td {
        vertical-align: middle;
        border-top: 1px solid $c-gray-11;
      }

      > th {
        text-align: left;

        padding: 10px;

        &.table-link {
          padding: 0;

          a {
            padding: 10px;
          }
        }

        &.squeeze-column {
          width: 1px;
          white-space: nowrap;
        }
      }
      > td {
        padding: 5px 6px;
        color: $c-gray-55;

        &.table-link {
          padding: 0;

          a {
            padding: 5px 6px;
          }
        }

        &.table-actions {
          .btn-regular {
            padding: 4px 6px;
            line-height: 13px;
          }
        }
      }

      &.has-error-row {
        > td {
          border-top: 1px double $c-state-alert;
          border-bottom: 0;
          padding-bottom: 5px;

          &:first-child {
            border-left: 1px solid $c-state-alert !important;
          }

          &:last-child {
            border-right: 1px solid $c-state-alert !important;
          }
        }
      }

      &.error-row {
        > td {
          padding: 2px 14px;

          color: $c-white;
          background-color: $c-state-alert;

          border-top: 0;
          border-bottom: 0;
          border-left: 1px solid $c-state-alert !important;
          border-right: 1px solid $c-state-alert !important;
        }
      }

    }


  }

  > thead > tr > th {
    background-color: $c-gray-11;

    > a:not(.btn) {
      font-size: $fs-small;
      line-height: 1;
      color: $c-black;
    }

    &.sortable:not(.sorted.order1, .sorted.order2) {
      > a {
        &:before {
          font-family: FontAwesome;
          content: $fa-var-sort;
          margin-right: 5px;
        }
      }
    }

    &.sorted {
      // desc
      &.order1 {
        > a {
          color: $c-blue-27;

          &:before {
            font-family: FontAwesome;
            content: $fa-var-sort-desc;
            margin-right: 5px;
          }
        }
      }

      // asc
      &.order2 {
        > a {
          color: $c-blue-27;

          &:before {
            font-family: FontAwesome;
            content: $fa-var-sort-asc;
            margin-right: 5px;
          }
        }

      }
    }
  }



  tbody > tr > th:first-child, tbody > tr > td:first-child {
    input[type="checkbox"] {
      margin: 0;
      vertical-align: middle;
    }

    .checkbox-inline {
      padding-top: 0;

      input[type="checkbox"] {
        margin: 4px 0 0;
        margin-top: 4px \9;
        margin-left: -20px;
      }
    }
  }

  tbody > tr > td:first-child {
    input[type="checkbox"] {
      margin-left: 5px;
    }
  }

  // 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 $c-gray-11;
  }

  // Nesting
  .table {
    background-color: $c-gray-11;
  }

}

body.dark-theme .table {

  background-color: $c-dt-table-background;


  &.disabled {
    text-decoration: none;
    background-color: $c-dt-table-disabled-background;
  }

  > thead,
  > tbody,
  > tfoot {
    > tr {
      >th, > td {
        border-color: $c-dt-table-border;
      }

      > td {
        color: $c-dt-table-text;
      }
    }
  }

  > thead > tr > th {
    background-color: $c-dt-table-header-background;

    > a:not(.btn) {
      color: $c-dt-table-header-text;
    }

  }
}
// Condensed table w/ half padding

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th {
        padding: 5px 10px;

        &.table-link {
          padding: 0;

          a {
            padding: 5px 10px;
          }
        }
      }
      > td {
        padding: 5px 5px;

        &.table-link {
          padding: 0;

          a {
            padding: 5px 5px;
          }
        }
      }
    }
  }
}

.table-equal-col-width {
  table-layout: fixed
}

// Bordered version
//
// Add borders all around the table and between all the columns.

.table-bordered {
  border: 1px solid $c-gray-20;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid $c-gray-20;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}

body.dark-theme .table-bordered {
  border-color: $c-dt-table-border;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border-color: $c-dt-table-border;
      }
    }
  }
}

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

.table-striped:not(.disabled) {
  > tbody > tr:nth-child(even):not(.error-row):not(.disabled) {
    > td,
    > th {
      background-color: $c-gray-02;
    }
  }
}

body.dark-theme .table-striped:not(.disabled) {
   > tbody > tr:nth-child(even):not(.error-row):not(.disabled) {
    > td,
    > th {
      background-color: lighten($c-dt-table-background, 5%);
    }
  }
}

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

.table-hover:not(.disabled) {
  > tbody > tr:hover:not(.error-row):not(.disabled) {
    > td,
    > th {
      background-color: $c-blue-03;
      cursor: pointer;
    }
  }

  > tbody > tr:active:not(.error-row),
  > tbody > tr:focus:not(.error-row) {
    > td,
    > th {
      background-color: darken($c-blue-03, 5%);
    }
  }
}

body.dark-theme .table-hover:not(.disabled) {
  > tbody > tr:hover:not(.error-row) {
    > td,
    > th {
      background-color: lighten($c-dt-table-background, 10%);
    }
  }

  > tbody > tr:active:not(.error-row),
  > tbody > tr:focus:not(.error-row) {
    > td,
    > th {
      background-color: lighten($c-dt-table-background, 15%);
    }
  }
}

// Table cell sizing
//
// Reset default table behavior

table col[class*="col-"] {
  position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
  float: none;
  display: table-column;
}
table {
  td,
  th {
    &[class*="col-"] {
      position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
      float: none;
      display: table-cell;
    }
  }
}

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

// Generate the contextual variants

@each $conf in $states {
  $state: nth($conf, 1);
  $color: nth($conf, 2);

  @include table-row-variant($state, $color);
}


// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling.
// ALWAYS APPLIES contrary to bootstrap default

.table-responsive {
  @include clearfix();

  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border-top: 1px solid $c-gray-20;
  border-bottom: 1px solid $c-gray-20;
  -webkit-overflow-scrolling: touch;

  // Tighten up spacing
  > .table {
    margin-bottom: 0;

    // Ensure the content doesn't wrap
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          white-space: nowrap;
        }
      }
    }
  }

  // Special overrides for the bordered tables
  > .table-bordered {

    // 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;
        }
      }
    }

    // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
    // chances are there will be only one `tr` in a `thead` and that would
    // remove the border altogether.
    > tbody,
    > tfoot {
      > tr:last-child {
        > th,
        > td {
          border-bottom: 0;
        }
      }
    }

  }
}

.tile-content .table-responsive:first-child {
  border-top: 0;
}

.table-form {
  .form-control {
    min-width: 75px;
  }

  .has-feedback .form-control {
    min-width: 135px;
  }
}

.table-content-forms {
  padding: 30px;
}

.table-link {
  a {
    display: block;
    outline: none;
  }
}

.table-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.table-wrapper {
  @include clearfix();
  .table-controls {
    @include clearfix();
  }
}

.table-wrapper {
  .table-responsive {
    border: none;
  }
}
