@import "../variables";
@import "~cosmoUiVariables";

$table-fg: $gray-dark !default;
$table-border-color: $gray-mid !default;
$table-row-border-color: $gray-mid !default;
$table-row-bg: $white !default;
$table-row-bg-hover: $gray-light !default;
$table-row-bg-alt: $gray-lightest !default;


.container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    color: $table-fg;
    font-size: 12px;

    tr {
        background-color: $table-row-bg;

        td, th {
            padding: 8px;
            line-height: 1.4;
            vertical-align: top;
            border-bottom: 1px solid $table-row-border-color;
        }
         th {
             text-align: left;
             border-bottom-width: 2px;
         }
    }

    tr:last-child {
        td {
            border-bottom: 0;
        }
    }
}

.condensed {
    tr {
        td, th {
            padding: 5px;
        }
    }
}

.bordered {
    border: 1px solid $table-border-color;
    td, th {
        border-right: 1px solid $table-row-border-color;
    }
    td:last-child, th:last-child {
        border-right: 0;
    }
}

.striped {
    tbody > tr:nth-of-type(odd) {
        background-color: $table-row-bg-alt;
    }
}

.hover {
    tr:hover {
        background-color: $table-row-bg-hover;
    }
}

.stripedHover {
    tbody > tr:nth-of-type(odd):hover {
        background-color: $table-row-bg-hover;
    }
}