Asymmetrik/ngx-starter

@use 'sass:map';
@import 'shared';

$anchored-table-min-height: 375px !default;

.table-header,
.table-footer {
    display: flex;
    align-items: center;

    &.border-top {
        border-top: calc(#{$table-border-width} * 2) solid $table-border-color !important;
        padding-top: $spacer;
    }

    .table-actions {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;

        .table-actions-group {
            align-items: center;
            margin-bottom: $spacer;
            margin-right: $spacer * 2;

            &:last-of-type {
                margin-right: 0;
            }

            & ~ &.ms-auto {
                margin-right: 0;
            }
        }
    }
}

.table-footer.border-top {
    margin-top: $spacer;
}

.table-content {
    border-bottom: calc(#{$table-border-width} * 2) solid $table-border-color;
    flex-grow: 1;
    margin-bottom: map.get($spacers, 3);
    overflow: auto;

    .table {
        margin-bottom: 0;
    }

    th {
        white-space: nowrap;
    }
}

.table {
    border-collapse: separate;
    border-spacing: 0;

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

    th {
        border-top-width: calc(#{$table-border-width} * 2);
    }
}

tr.cdk-row-expanded-details {
    & > td {
        border-top: none;
    }
}

.cdk-table-sticky {
    background: inherit;
}

.table tfoot tr:first-child td.cdk-footer-cell {
    border-top: calc(#{$table-border-width} * 2) solid $table-border-color;
}