$table-radius: $radius-lg;

.tableContainer {
    &.scrollable {
        overflow-x: auto;
        width: 100%;
        @include scrollbar();

        th:first-child,
        td:first-child {
            left: 0;
            // box-shadow: inset -1px 0 $color-border;
        }
    }
}

.table {
    width: 100%;
}

.tr {
    width: 100%;
}

.td {
    text-align: left;
    padding: $gutter-sm $gutter;
    vertical-align: middle;
    background: $color-cardBg;
    border-bottom: 1px solid $color-border;
    // border-left: 1px solid $color-border;

    .compact & {
        padding: ($gutter-sm - 2) $gutter - 2;
    }

    &:first-child {
        border-left: 0;
    }
}

.th {
    text-align: left;
    text-transform: uppercase;
    font-size: $font-size-xs;
    letter-spacing: 0.3px;
    color: $color-secondaryText;
    background: $color-pillBg;

    border-bottom-color: $color-contentBg;

    @if ($theme == light) {
        // looks sharper
        border-bottom-color: $color-pillBg;
        background: $color-cardBg;
    }

    /* gets too small otherwise */
    .compact & {
        padding: $gutter-sm $gutter;
    }
}

/* manage rounded corners */

.round > thead > tr:first-child .td {
    &:first-child {
        border-top-left-radius: $table-radius;
    }

    &:last-child {
        border-top-right-radius: $table-radius;
    }
}

/* stylelint-disable no-descending-specificity */
.round > tbody > tr:last-child > td {
    &:first-child {
        border-bottom-left-radius: $table-radius;
    }

    &:last-child {
        border-bottom-right-radius: $table-radius;
    }
}

/* disable last row border */

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