/*

Tables

For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.

Markup:
<table class="table {$modifiers}">
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

.table--striped - Adds zebra-striping to any table row within the `<tbody>` via the :nth-child CSS selector *(not available in IE8)*
.table--bordered - Add borders and rounded corners to the table.
.table--hover - Enable a hover state on table rows within a `<tbody>`.
.table--condensed - Makes tables more compact by cutting cell padding in half.

Styleguide 20

*/

@if $tables {

    table {
        max-width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .table {
        width: 100%;
        margin-bottom: rhythm(1);

        th,
        td {
            padding: $tables-padding;
            line-height: rhythm(1);
            @extend %text-align-left;
            vertical-align: top;
        }

        th { @extend %font-weight-bold; }

        thead th { vertical-align: bottom; }

        caption + thead tr:first-child th,
        caption + thead tr:first-child td,
        colgroup + thead tr:first-child th,
        colgroup + thead tr:first-child td,
        thead:first-child tr:first-child th,
        thead:first-child tr:first-child td {
            border-top: 0;

        }

        tbody + tbody { border-top: 2px solid $grayLight; }

    }

// Condensed Table w/ Half Padding

    .table--condensed {
        $half-top: nth($tables-padding, 1) / 2;
        $half-side: nth($tables-padding, 2) / 2;

        th, td { padding: $half-top $half-side; }
    }

// Zebra-striping

    .table--striped {
        tbody {
            > tr:nth-child(odd) > td,
            > tr:nth-child(odd) > th {
                @extend %table--striped !optional;
            }
        }
    }

// Bordered Version

    .table--bordered {
        @extend %table--bordered !optional;
    }

// Hover effect

    .table--hover {
        tbody {
            tr:hover > td,
            tr:hover > th {
                @extend %table--hover !optional;
            }
        }
    }

// Sortable

    .table--sortable {
        @extend %table--sortable !optional;

        thead {
            th {
                @extend %cursor-pointer;

                &.sorting-asc:after,
                &.sorting-desc:after {
                    @extend %float-right;
                }
            }
        }
    }
}