/* ------------------------------------------------------------------------------
*
*  # Tables component
*
*  Overrides for tables bootstrap component
*
*  Version: 1.1
*  Latest update: Oct 20, 2015
*
* ---------------------------------------------------------------------------- */


// Base class
// -------------------------

// All table headers are semi-bold
th {
    font-weight: 500;
}

// Table base
.table {
    margin-bottom: 0;

    // Cells
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                vertical-align: middle;
            }
        }
    }

    // Lighten border in colored tables or panels
    .panel[class*=bg-] &,
    &[class*=bg-] {
        > thead,
        > tbody,
        > tfoot {
            > tr {
                > th,
                > td {
                    border-color: fade(#fff, 20%);
                }
            }
        }
    }
    tr {
        &[class*=bg-] {
            > td,
            > th {
                border-color: #fff;
            }
        }

        > td[class*=bg-],
        > th[class*=bg-] {
            border-color: #fff;
        }
    }


    // Custom header bottom border color
    > thead {
        > tr[class*=border-bottom-] {
            > th,
            > td {
                border-bottom-color: inherit;
            }
        }
    }

    // Custom body and footer bottom border color
    > tbody,
    > tfoot {
        > tr[class*=border-top-] {
            > th,
            > td {
                border-top-color: inherit;
            }
        }
    }

    // Darker border colors for thead and tfoot
    > thead > tr > th {
        border-bottom: 1px solid @table-border-highlight;
    }
    > tfoot > tr > th {
        border-top: 1px solid @table-border-highlight;
    }

    // Nesting
    .table {
        background-color: @panel-bg;
    }
}

// Add top border in multiple table rows
.table:not(.table-bordered):not(.table-framed) {
    .table-responsive + .table-responsive > &,
    & + & {
        border-top: 1px solid @table-border-color;
    }
}

// Remove doubled top border if no thead
.panel-body {
    + .table,
    + .table-responsive > .table {
        > tbody:first-child > tr:first-child {
            > td,
            > th {
                border-top: 0;
            }
        }
    }
}

// Inside modal dialog body
.modal-body {
    + .table-responsive > .table,
    + .table {
        border-bottom: 1px solid @table-border-color;
    }

    // Table responsive div container
    + .table-responsive {
        border: 0;
    }
}

// Apply white color to top borders in solid panels
.panel[class*=bg-] {
    > .panel-body {
        + .table,
        + .table-responsive {
            border-color: #fff;
        }
    }
}



// Table borders
// -------------------------

// Solid border
.table {
    > thead > tr {
        &.border-solid {
            > th,
            > td {
                border-bottom-width: 2px;
            }
        }
    }

    > tbody > tr,
    > tfoot > tr {
        &.border-solid {
            > td,
            > th {
                border-top-width: 2px;
            }
        }
    }
}

.table-bordered {
    > thead > tr {
        &.border-solid:first-child {
            > th,
            > td {
                border-bottom-width: 2px;
            }
        }
    }
}


// Double border
.table {
    > thead > tr {
        &.border-double {
            > th,
            > td {
                border-bottom-width: 3px;
                border-bottom-style: double;
            }
        }
    }

    > tbody > tr,
    > tfoot > tr {
        &.border-double {
            > td,
            > th {
                border-top-width: 3px;
                border-top-style: double;
            }
        }
    }
}

.table-bordered {
    > thead > tr.border-double:first-child {
        > th,
        > td {
            border-bottom-width: 3px;
            border-bottom-style: double;
        }
    }
}


// Dashed border
.table {
    > tbody > tr {
        &.border-dashed {
            > td,
            > th {
                border-top-style: dashed;
            }
        }
    }
}


// Framed table
.table-framed {
    &,
    .panel > &,
    .panel > .table-responsive > & {
        border: 1px solid @table-border-color;
    }

    // Hide border on mobile
    @media screen and (max-width: @screen-xs-max) {
        .table-responsive > & {
            border: 0;
        }
    }
}


// Borderless table
.table-borderless {
    > tbody {
        > tr {
            > td,
            > th {
                border: 0;
            }
        }
    }
}


// Columned table
.table-columned {
    > tbody,
    > tfoot {
        > tr {
            > td,
            > th {
                border: 0;
                border-left: 1px solid @table-border-color;

                &:first-child {
                    border-left: 0;
                }
            }
        }
    }

    > thead {
        > tr {
            > th,
            > td {
                border-left: 1px solid @table-border-color;

                &:first-child {
                    border-left: 0;
                }
            }
        }
    }
}



// Table sizing
// -------------------------

// XLarge
.table-xlg {
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: @table-xlarge-cell-padding;
            }
        }
    }
}

// Large
.table-lg {
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: @table-large-cell-padding;
            }
        }
    }
}

// Small
.table-sm {
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: @table-small-cell-padding;
            }
        }
    }
}

// Mini
.table-xs {
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: @table-mini-cell-padding;
            }
        }
    }
}

// Extra mini
.table-xxs {
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: @table-micro-cell-padding;
            }
        }
    }
}



// Bordered table
// -------------------------

.table-bordered {
    tr:first-child {
        > td,
        > th {
            border-top-color: @table-border-highlight;
        }
    }

    // Inside colored table elements
    tr[class*=bg-] > th,
    tr[class*=bg-] > td,
    tr > th[class*=bg-],
    tr > td[class*=bg-] {
        border-color: #fff;
    }
}



// Striped table
// -------------------------

.table-striped {
    .panel[class*=bg-] & > tbody > tr:nth-child(odd),
    &[class*=bg-] > tbody > tr:nth-child(odd) {
        background-color: fade(#000, 5%);
    }
}



// Hover table
// -------------------------

.table-hover {

    // Inherit bg color on hover
    > tbody > tr:hover {
        > th,
        > td {
            background-color: inherit;
        }
    }

    // Inside colored tables
    .panel[class*=bg-] & > tbody > tr:hover,
    &[class*=bg-] > tbody > tr:hover {
        background-color: fade(#000, 10%);
    }
}



// Table backgrounds
// -------------------------

// Change active bg color in colored panel and table
.panel[class*=bg-] .panel-body > .table,
.panel[class*=bg-] .panel-body > .table-responsive > .table,
.table[class*=bg-] {
    .active > th,
    .active > td,
    th.active,
    td.active {
        background-color: fade(#000, 15%);
    }
}