// Tables
//
// Apply simple and clean styles to tables by using the `pam-Table` attribute.
// There are a number of basic modifiers that can be used such as `striped`, `bordered` and `fluid`.
//
// Weight: 7
//
// Markup:
// <table pam-Table="{{modifier_class}}">
//     <caption>Hello, I'm caption</caption>
//     <thead>
//         <tr>
//             <th>#</th>
//             <th>Title</th>
//             <th>Rating</th>
//             <th>Year</th>
//         </tr>
//     </thead>
//     <tbody>
//         <tr>
//             <td>1</td>
//             <td>Swordfish</td>
//             <td>10</td>
//             <td>2001</td>
//         </tr>
//         <tr>
//             <td>2</td>
//             <td>WarGames</td>
//             <td>9.0</td>
//             <td>1983</td>
//         </tr>
//         <tr>
//             <td>3</td>
//             <td>Sneakers</td>
//             <td>8.9</td>
//             <td>1992</td>
//         </tr>
//     </tbody>
// </table>
//
// horizontal - Creates a row focused table.
// bordered - Applies inner borders to table.
// striped - Exactly as it sounds, a striped table.
// borderless - Remove all borders.
// center - Horizontally center all cells.
// fluid - Adjusts it's width to its parent element.
//
// Style guide: tables

//  Variables
// ==================================================================

@table-border-color: @skin-light;
@table-border-style: solid;
@table-border-width: 1px;
@table-color: @skin-text-dark;
@table-padding-bp-medium: @space-16;
@table-padding: @space-8;

@table-head-bg-color: @skin-lighter;
@table-head-border-bottom: @table-border-width @table-border-style @table-border-color;

@table-striped-odd-bg-color: @skin-lighter;

@table-border-bordered-color: @skin-light;
@table-border-bordered-style: solid;
@table-border-bordered-width: 1px;

@table-border-horizontal-color: @skin-light;
@table-border-horizontal-style: solid;
@table-border-horizontal-width: 1px;

// ==================================================================
//  Table
// ==================================================================

[pam-Table] {
    border-collapse: collapse;
    border-spacing: 0;
    color: @table-color;
    empty-cells: show;

    .hook-table;
}

[pam-Table] caption {
    font-style: italic;
    padding: @table-padding 0;
    text-align: center;

    .hook-table-caption;
}

[pam-Table] thead {
    background-color: @table-head-bg-color;
    border-bottom: @table-head-border-bottom;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;

    .hook-table-thead;
}

[pam-Table] td,
[pam-Table] th {
    border-left: @table-border-width @table-border-style @table-border-color;
    border-width: 0 0 0 @table-border-width;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: @table-padding;

    .hook-table-td-th;
}

[pam-Table] td {
    background-color: transparent;

    .hook-table-td;
}

[pam-Table] td:first-child,
[pam-Table] th:first-child {
    border-left-width: 0;

    .hook-table-td-th-first-child;
}

[pam-Table] tbody > tr:last-child > td {
    border-bottom-width: 0;
}

/* stylelint-disable no-descending-specificity */

//  Modifier: Center
// ==================================================================

[pam-Table~="center"] td,
[pam-Table~="center"] th {
    text-align: center;

    .hook-table-center;
}

//  Modifier: Horizontal
// ==================================================================

[pam-Table~="horizontal"] td,
[pam-Table~="horizontal"] th {
    border-bottom: @table-border-horizontal-width @table-border-horizontal-style @table-border-horizontal-color;
    border-width: 0 0 @table-border-horizontal-width;

    .hook-table-horizontal-td-th;
}

//  Modifier: Borderless
// ==================================================================

[pam-Table~="borderless"] {
    border: none;

    .hook-table-borderless;
}

[pam-Table~="borderless"] td,
[pam-Table~="borderless"] th {
    border-left: none;
}

//  Modifier: Bordered
// ==================================================================

[pam-Table~="bordered"] td {
    border-bottom: @table-border-bordered-width @table-border-bordered-style @table-border-bordered-color;

    .hook-table-bordered;
}

//  Modifier: Striped
// ==================================================================

[pam-Table~="striped"] tr:nth-child(2n) td {
    background-color: @table-striped-odd-bg-color;

    .hook-table-striped;
}

//  Modifier: Fluid
// ==================================================================

[pam-Table~="fluid"] {
    width: 100%;

    .hook-table-fluid;
}

// Device breakpoints
// ==================================================================

@media screen and (min-width: @breakpoint-medium) {
    [pam-Table] caption {
        padding: @table-padding-bp-medium 0;

        .hook-table-caption-bp-medium;
    }

    [pam-Table] td,
    [pam-Table] th {
        padding: @table-padding-bp-medium;

        .hook-table-td-th-bp-medium;
    }
}

/* stylelint-enable no-descending-specificity */

//  Hooks
// ==================================================================

// Hooks
//
// `.hook-table`
// `.hook-table-caption`
// `.hook-table-caption-bp-medium`
// `.hook-table-odd-td`
// `.hook-table-td`
// `.hook-table-td-th`
// `.hook-table-td-th-bp-medium`
// `.hook-table-td-th-first-child`
// `.hook-table-thead`
// `.hook-table-bordered`
// `.hook-table-bordered-tbody-tr-last-child`
// `.hook-table-borderless`
// `.hook-table-center`
// `.hook-table-fluid`
// `.hook-table-horizontal-tbody-tr-last-child`
// `.hook-table-horizontal-td-th`
// `.hook-table-striped`
//
// Style guide: tables.hooks

/* stylelint-disable block-no-empty */
.hook-table() {
}
.hook-table-caption() {
}
.hook-table-caption-bp-medium() {
}
.hook-table-odd-td() {
}
.hook-table-td() {
}
.hook-table-td-th() {
}
.hook-table-td-th-bp-medium() {
}
.hook-table-td-th-first-child() {
}
.hook-table-thead() {
}
.hook-table-bordered() {
}
.hook-table-bordered-tbody-tr-last-child() {
}
.hook-table-borderless() {
}
.hook-table-center() {
}
.hook-table-fluid() {
}
.hook-table-horizontal-tbody-tr-last-child() {
}
.hook-table-horizontal-td-th() {
}
.hook-table-striped() {
}

/* stylelint-enable */