.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-row {
            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); }

}

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

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