@use "../settings";

@layer components.table {
    .tableCell,
    .tableHeadCell,
    .isTableCellSortingActive,
    .isTableHeadCellSortingActive {
        padding: settings.$cell-padding-y settings.$cell-padding-x;
        text-align: left;
        border-bottom: settings.$border-width solid settings.$border-color;
    }

    .tableHeadCell {
        font-weight: settings.$head-font-weight;
        border-bottom-width: 2px;
    }

    .tableHeadCellLayout {
        display: flex;
        gap: settings.$cell-padding-x;
        align-items: center;
    }

    .isTableCellSortingActive,
    .isTableHeadCellSortingActive {
        background-color: settings.$sorted-background-color;
    }
}