.table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    @include space(0, $name: "padding");
    @include size(100%, "width");
    border-radius: $base-border-radius $base-border-radius 0 0;
    box-shadow: $base-shadow-default;
    overflow: hidden;

    thead tr {
        text-align: left;
        font-weight: bold;
    }

    th, td { @include space-many(var(--table-padding-vertical), var(--table-padding-horizontal), $name: "padding"); }

    tr {
        border-bottom: 1px solid var(--table-border-color);

        &.active {
            font-weight: bold;
            color: var(--var-bg-color);
        }
    }

    &.with-color thead tr {
        background-color: var(--var-bg-color); color: var(--white-color);
    }

    &.with-fill tbody tr:last-of-type { 
        border-bottom: var(--table-fill-size) solid var(--var-bg-color);
    }

    &.with-stripe tbody tr:nth-of-type(odd) {
        background-color: var(--table-odd-color) !important;
    }
    
    &.with-border table, 
    &.with-border tr * { 
        border: 1px solid var(--table-border-color);
    }

    &.with-center tr * { text-align: center; }
    &.with-hover tbody tr:hover {
        background-color: var(--table-odd-color);
    }

}

.tableResponsive {
    overflow-x: auto;
    @include space(em(5), $name: "padding");
    .table { @include space(0); }
}

@media screen and (max-width: $medium-screen) {
    .tableResponsive { overflow-y: hidden; }
}