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

@import "../common";

.#{$vendor-prefix}table {
    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.#{$vendor-prefix}table-divider { background: $gray-dark !important; }
}

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

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

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

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

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

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

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

        > a {
            background: $gray-dark;

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

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

.#{$vendor-prefix}table.#{$size-small-class} {
    thead th,
    tbody td { padding: $small-padding; }

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

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

.#{$vendor-prefix}table.#{$size-large-class} {
    thead th,
    tbody td { padding: $large-padding; }

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

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