/**
 *  components: table
 *
 *  <table class="table table--striped">
 *      <thead>
 *          <tr>
 *              <th>name</th>
 *              <th>age</th>
 *          </tr>
 *      </thead>
 *      <tbody>
 *          <tr>
 *              <td>The Shawshank Redemption</td>
 *              <td>12</td>
 *          </tr>
 *      </tbody>
 *  </table>
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;

$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;

$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;

@mixin crispy__table() {
    .table {
        width: 100%;

        &--striped {
            tr {
                &:nth-child(even) {
                    background-color: $crispy__table__striped__background-color;
                }
            }
        }

        &--scroll {
            overflow-x: auto;
        }

        td {
            color: $crispy__table__color;
        }

        td,
        th {
            text-align: left;
            border-bottom: $crispy__table__td__border;

            padding: $crispy__table__padding;
            @include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
        }

        th {
            border-bottom-width: $crispy__table__th__border-width;
        }
    }
}