//
// Tables
//
// <table></table>

// Baseline style
.table {
    width: 100%;
    max-width: 100%;
    margin: $table--margin;
    font-size: $table--font-size;
    // Cells
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: $table-cell--padding;
                line-height: $table--line-height;
                vertical-align: top;
                border-top: 1px solid $table--border-color;
            }
        }
    }
    // Bottom align for column headings
    > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid $table--border-color;
    }
    // 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 $table--border-color;
    }

    // Nesting
    .table {
        background-color: $body--background-color;
    }

    // Generate the contextual variants
    tr, td, th {
        &.active {
            background-color: $color-state--active;
        }

        &.success {
            background-color: $color-state--success;
        }

        &.info {
            background-color: $color-state--info;
        }

        &.warning {
            background-color: $color-state--warning;
        }

        &.danger {
            background-color: $color-state--danger;
        }
    }
}


//
// Table other styles
//
.table {
    //
    // Bordered version
    //
    // Add borders all around the table and between all the columns.
    //
    &--bordered {
        @extend .table;
        border: 1px solid $table--border-color;
        > thead,
        > tbody,
        > tfoot {
            > tr {
                > th,
                > td {
                    border: 1px solid $table--border-color;
                }
            }
        }
        > thead > tr {
            > th,
            > td {
                border-bottom-width: 2px;
            }
        }
    }

    //
    // Zebra-striping
    //
    // Default zebra-stripe styles (alternating gray and transparent backgrounds)
    //
    &--striped {
        @extend .table;
        > tbody > tr:nth-of-type(odd) {
            background-color: $table-cell--stripe-color;
        }
    }

    //
    // Hover effect
    //
    // Placed here since it has to come after the potential zebra striping
    //
    &--hover {
        @extend .table;
        > tbody > tr:hover {
            background-color: $table-row--hover-color;
        }
    }

}