@use "vars" as *;

.h-scrollable-table {
    overflow-x: auto;
}

.table {
    border-spacing: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    background: rgba($color_primary100, 0.01);

    th {
        height: 2em;
        color: $color_primary0;
        background-color: $color_primary75;
        border-color: $color_primary50;
        border-width: 0 1px 1px 0;
        border-style: solid;
        padding: 4px 10px;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        font-weight: 600;
        font-size: 1.1em;
    }

    td {
        border-color: $color_primary25;
        border-width: 0 1px 1px 0;
        border-style: solid;
        padding: 7px 5px;
        vertical-align: middle;
        text-align: center;
    }

    // Border fixes
    th:first-child, td:first-child {
        border-left-width: 1px;
    }

    tr:first-child th, tr:first-child td {
        border-top-width: 1px;
    }

    // Rounded corners for <th>
    tr:first-child th:first-child {
        border-top-left-radius: $table_header_rounding;
    }

    tr:first-child th:last-child {
        border-top-right-radius: $table_header_rounding;
    }

    tbody tr:last-child th:first-child {
        border-bottom-left-radius: $table_header_rounding;
    }
}

.striped tr:nth-child(even) {
    background: rgba($color_primary100, 0.03);
}
