/* Indux Tables */

@layer components {

    :where(table, .grid-table) {
        table-layout: auto;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-spacing: 0;
        border-radius: var(--radius, 0.5rem);

        /* Grid utility classes */
        :where(.grid-header, .grid-row, .grid-footer) {
            display: contents
        }

        /* Header row */
        :where(thead, .grid-header > *) {
            background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87));
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Header cell */
        :where(th,.grid-header > *) {
            font-weight: bold
        }

        /* Row */
        :where(tr, .grid-row > *) {
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Cell */
        :where(td, th, .grid-header > *, .grid-row > *, .grid-footer > *) {
            padding: calc(var(--spacing, 0.25rem) * 2.5) calc(var(--spacing, 0.25rem) * 4);
            font-size: 0.875rem;
            text-align: left;
            text-align: start;
            overflow: hidden;

            /* Make elements within cell inline */
            &>*:not(template) {
                display: inline-flex;
                vertical-align: middle;

                /* Add space between them */
                &:not(:last-child) {
                    margin-right: 4px
                }
            }
        }
        
        /* Footer row */
        :where(:not(:has(tfoot)) tbody tr:last-child, tfoot tr:last-child, .grid-footer > *) {
            border-bottom: 0
        }

        /* Striped utility class */
        &.striped {
            :where(tr:nth-child(even), .grid-row:nth-child(even)) {
                background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
            }

            :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
                background-color: transparent
            }

            :where(tr, .grid-row) {
                border-bottom: 0 none
            }
        }
    }
}