@use '@angular/material' as mat;

.responsive-table {
    overflow-x: auto;
    overflow-y: hidden;
}

.mat-mdc-table {
    width: 100%;
    max-width: 100%;

    .mat-mdc-cell {
        justify-content: center;
        background: var(--mat-sys-surface-container-lowest);
    }

    .mdc-data-table__content .mdc-data-table__row:last-child .mdc-data-table__cell {
        border-bottom: 1px solid var(--mat-sys-outline-variant);
    }

    .mat-mdc-header-row {
        background: var(--mat-sys-surface-container-high);
    }

    .mat-mdc-footer-row {
        background: var(--mat-sys-surface-container-lowest);
    }

    .mat-mdc-cell,
    .mat-mdc-header-cell,
    .mat-mdc-footer-cell {
        &:first-child {
            padding-right: 5px;
        }

        &:last-child {
            padding-left: 5px;
        }

        &:not(:first-child):not(:last-child) {
            padding-right: 5px;
            padding-left: 5px;
        }

        &.natural-align-right {
            text-align: right;
        }

        &.natural-align-center {
            text-align: center;

            .mat-sort-header-container {
                justify-content: center;
            }
        }
    }

    [mat-row].selected {
        background: rgba(0, 0, 0, 0.05);
        @supports (background: light-dark(black, white)) {
            background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
        }
    }

    .mat-mdc-footer-cell {
        font-weight: 500;
    }

    .natural-1em-column {
        width: 1em;
    }

    .natural-2em-column {
        width: 2em;
    }

    .natural-3em-column {
        width: 3em;
    }

    .natural-4em-column {
        width: 4em;
    }

    .natural-5em-column {
        width: 5em;
    }

    .natural-6em-column {
        width: 6em;
    }

    .natural-7em-column {
        width: 7em;
    }
}