/* SVUI Table widget */
@scope ([svui]) {
    [sv-ui="table"] {
        --sv-table-cell-min-width: 10rem;
        --sv-table-header-background: #ffffff;
        --sv-table-sticky-top: 0px;
        --sv-table-sticky-z-index: 20;
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    [sv-ui="table"] > [sv-role="scroll"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    [sv-ui="table"] > [sv-role="scroll"] > table {
        width: max-content;
        min-width: 100%;
        max-width: none;
        table-layout: auto;
    }

    [sv-ui="table"] > [sv-role="scroll"] > table :where(th, td) {
        min-width: var(--sv-table-cell-min-width);
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    [sv-ui="table"] table th {
        background: var(--sv-table-header-background);
    }

    [sv-ui="table"] > [sv-role="scroll"] > table:is([sticky], [sticky-x])
        > :is(thead, tbody, tfoot) > tr > th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        background: var(--sv-table-header-background);
    }

    .svui-table-sticky-y {
        position: fixed;
        z-index: var(--sv-table-sticky-z-index);
        top: var(--sv-table-sticky-top);
        display: block;
        overflow: hidden;
        pointer-events: none;
    }

    .svui-table-sticky-y > table {
        position: absolute;
        top: 0;
    }

    .svui-table-sticky-y__table {
        z-index: 0;
    }

    .svui-table-sticky-y__corner {
        left: 0;
        z-index: 1;
    }

    @media (any-hover: hover) and (any-pointer: fine) {
        [sv-ui="table"][data-svui-table-scrollable] > [sv-role="scroll"] {
            cursor: grab;
        }

        [sv-ui="table"][data-svui-table-scrollable] > [sv-role="scroll"]
            :where(a, button, label, summary, [role="button"], [role="link"]) {
            cursor: pointer;
        }

        [sv-ui="table"][data-svui-table-scrollable] > [sv-role="scroll"]
            :where(input, textarea, select, option, details, [contenteditable]) {
            cursor: auto;
        }
    }

    [sv-ui="table"][data-svui-table-dragging] > [sv-role="scroll"],
    [sv-ui="table"][data-svui-table-dragging] > [sv-role="scroll"] * {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
    }
}