/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}table {
    width: 100%;
    background: $gray;
    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; }
    }

    // Zebra striping
    tbody tr {
        background: $gray;

        &:nth-child(odd) { background: $gray-lightest; }
        &.#{$vendor-prefix}table-divider { background: $gray-dark; }
    }
}

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

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

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

.#{$vendor-prefix}table.#{$state-is-prefix}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; }

    &.#{$state-is-prefix}sortable {
        thead th {
            padding: 0;

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

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

    &.#{$state-is-prefix}sortable {
        thead th {
            padding: 0;

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