/*
 * Table classes
 *
 * Table of Contents
 *
 * Base Styles
 * Styles Tables
 * Raw Tables
 */


/* ==========================================================================
   Base Styles
   ========================================================================== */

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

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

}


/* ==========================================================================
   Styles Tables
   ========================================================================== */

.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;
        }
    }
}


/* ==========================================================================
   Raw Tables
   ========================================================================== */

table {
    @extend %table;
}