/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

#{$table-class} {
    width: 100%;
    margin-top: $margin;
    background: $gray-lightest;
    border-collapse: collapse;

    th, td {
        padding: $padding;
        line-height: 110%;
        vertical-align: top;
        border: 1px solid $gray-dark;
    }

    // Move headings to bottom
    thead th {
        vertical-align: bottom;
        text-align: left;

        .sorter {
            margin: -.5rem .25rem;
        }
    }

    // Allow for multiple tbody's
    tbody + tbody { border-top-width: 2px; }

    // Row colors
    thead tr,
    tfoot tr {
        background: $gray-dark;

        th { border-color: $gray-darkest; }
    }

    // Divider
    tbody tr#{$table-class-divider} { background: $gray-dark !important; }
}

#{$table-class-responsive} {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

//-------------------- Modifiers --------------------//

#{$table-class}.has-hover {
    tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
}

#{$table-class}.is-striped tbody tr {
    background: $gray;

    &:nth-child(odd) { background: $gray-lightest; }
}

#{$table-class}.is-sortable {
    thead th {
        padding: 0;

        > a,
        > span {
            padding: $padding;
            display: block;
        }

        > a {
            background: $gray-dark;

            &:hover { background: $gray-darkest; }
        }
    }
}

//-------------------- Sizes --------------------//

#{$table-class} {
    @include is-small {
        thead th,
        tbody td { padding: $small-padding; }

        &.is-sortable {
            thead th {
                padding: 0;

                > a,
                > span { padding: $small-padding; }
            }
        }
    }

    @include is-large {
        thead th,
        tbody td { padding: $large-padding; }

        &.is-sortable {
            thead th {
                padding: 0;

                > a,
                > span { padding: $large-padding; }
            }
        }
    }
}