@layer lime {
    data-table {
        display: grid;
        overflow: hidden;
        outline: 0;
        /* this is the whole table, "tbody" is actually .scroll-body */
    }

    data-table .table-body {
        overflow: auto !important;
        row-gap: var(--row-spacing);
        grid-template-columns: var(--columns);
        grid-auto-rows: min-content;
        position: relative;
        /* thead > tr */
        /* the actual "tbody" */
    }

    data-table .table-body .table-row,
    data-table .table-body .table-header {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    data-table .table-body .table-header {
        height: var(--header-height, var(--row-height));
    }

    data-table .table-body .table-header .table-cell {
        line-height: var(--header-height, var(--row-height));
    }

    data-table .table-body .table-row {
        height: var(--row-height);
    }

    data-table .table-body .table-row .table-cell {
        line-height: var(--row-height);
    }

    data-table .table-body .table-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: inherit;
        border-bottom: 1px solid var(--grid-border-color);
        gap: var(--grid-spacing);
    }

    data-table .table-body .table-cell {
        cursor: default;
        box-sizing: border-box;
        flex-shrink: 0;
        height: 100%;
        /* trunace-text */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    data-table .table-body .scroll-body {
        grid-auto-rows: var(--row-height);
        gap: var(--grid-spacing);
        /* tbody > tr */
    }

    data-table .table-body .scroll-body .table-row {
        place-items: center stretch;
        box-sizing: border-box;
    }

    data-table .table-body .scroll-body .table-row.selected {
        background-color: var(--selected-bg-color);
        color: var(--selected-fg-color);
    }
}