// _tables.scss

.table {
    margin-top: 5px;
    
    tr {
        height: 25px;
    }

    thead tr {

        th {
            border: none;
            border-top: 1px solid $koala;
            border-bottom: 1px solid $koala;
            color: $gray;
            font-size: 12px;
            font-weight: $font-weight-bold;
            text-transform: uppercase;
            background: $white;
            vertical-align: middle;
            cursor: default;
            padding: 4px 8px;

            a {
                color: $gray;
            }

        }

    }

    > caption+thead, > colgroup+thead, > thead:first-child {

        > tr:first-child {

            > th, > td {
                border-top: 1px solid $koala;
            }

        }

    }

    tbody tr {

        td {
            border-bottom: 1px solid $mouse;
            border-top: none;
            font-size: 13px;
        }

    }

}

.table-bordered {
    border: 1px solid $gray-lightest;

    thead, tbody, tfoot {

        tr {

            th, td {
                border: 1px solid $gray-lightest;  
            }

        }

    }

    thead {

        tr {

            th, td {
                border-bottom-width: 2px;
            }

        }

    }
    
}

.table-striped {

    tbody tr {

        &:nth-of-type(odd),
        &:nth-of-type(even) {
            background-color: transparent;
        }

        &:nth-child(even) {

            th, td {
                background-color: $bg-gray-lightest;
            }

        }

        td {
            border: none;  
        }

    }

}

.table-hover {

    tbody tr:hover {
        background-color: $blue-light;
        cursor: pointer;
    }

}

.table-sorter {

    thead tr {
        
        th.headerSortUp, th.headerSortDown,
        th.tablesorter-headerDesc, th.tablesorter-headerAsc {
            cursor: pointer;
            padding-right: 18px;
            position: relative;

            &:after {
                content: "";
                background: $grey;
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 4px;
            }

        }

        th.headerSortUp,
        th.tablesorter-headerDesc {
            background: url('/../images/redesign/up-arrow.svg') no-repeat $white right 5px top 50%;
        }

        th.headerSortDown,
        th.tablesorter-headerAsc {
            background: url('/../images/redesign/down-arrow.svg') no-repeat $white right 5px top 50%;
        }

    }

}

.table.tall tbody tr td,
.table.table-striped.tall tbody tr td {
    height: 110px;
}

.table-input-select {

    margin-top: 0;

    .no-data-found {
        color: $rhino;
        font-weight: $font-weight-bold;
        padding-top: 30px
    }

    .checkbox {
        margin: 0px;
    }

    .table-row-bg {
        background: $skyblue-table-stripe;
    }

    .th-head-space {
        padding: 0px 12px;
    }
}

.table-button-section {
    border: 1px solid $koala;
    border-top: 0;
    margin-top: 0px;
    padding: 15px 0;
}

// Expand/Collapse Table Panel Styles
.expand-collapse-table-panel {

    > tr {
        display: none;
    }

    &.expanded tr,
    tr.display-row,
    tr.toggle-row-panel,
    tr.exclude-row {
        display: table-row;
    }


    .toggle-row-panel {

        .expand-collapse-btn:before {
            content: "\002b";
            display: inline-block;
            font-size: 11px;
            font-weight: 500;
            font-family: 'Glyphicons Halflings';
            margin-right: 10px;
            position: relative;
        }

    }


    &.expanded {

        .toggle-row-panel {

            .expand-collapse-btn:before {
                content: "\2212";
            }

        }

    }

}

.data {

    td,
    th {
        border: 1px solid $koala;
    }

}