/**
 * component: 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
 *
 */


$crispy__table__padding: toEm(10px 8px) !default;

$crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;
$crispy__table__th__border-width: 2px !default;

$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: lighten($crispy__color-text, 75%) !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 {
            padding: $crispy__table__padding;
            text-align: left;
            border-bottom: $crispy__table__td__border;
        }

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