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

@import "../common";

@include export("table") {
    #{$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;

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