// ------------------------------------------------------------
// Tables
//
// Default Styles for HTML tables
//
// * Base Table
// * Default Table
// ------------------------------------------------------------

//
// Base Table
// --------------------------------------------------
// Minimal styling

table,
%table {
    @include baseline;
    width: 100%;
    max-width: 100%;
    background-color: transparent;

    th,
    td {
        padding: 8px;
        line-height: 20px;
        text-align: left;
        vertical-align: middle;
    }

}


//
// Default Table
// --------------------------------------------------
// Properly styled with colour, spacing, and borders

.table {

    @extend %table;

    th,
    td {
        border-top: 1px solid $lightbrown;
    }

    th {
        color: $brown;
    }

    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 $lightbrown;
    }

    table table {
        background-color: #fff;
    }

    tbody > tr:nth-child(odd) > td,
    tbody > tr:nth-child(odd) > th {
        background-color: lighten($lightbrown, 5%);
    }

    &.plain {
        tbody > tr:nth-child(odd) > td,
        tbody > tr:nth-child(odd) > th {
            background: transparent;
        }
    }
}//.table