/**
 * NYSA11y Table (native)
 * Path: /assets/nysa11y/table-native.css
 * Depends on /assets/nysa11y/table-native.js
 */
@layer nysa11y {
    body:has(.nysa11y) {
        font-size: 16px; /* 1.0rem */
        table.nysa11y.table[data-component="table"][data-html="native"] {
            *,
            *:before,
            *:after {
                box-sizing: border-box;
            }
            background-color: var(--nys-color-ink-reverse, #ffffff);
            border-collapse: collapse;
            font-family: var(
                --nys-font-family-sans,
                "Proxima Nova",
                -apple-system,
                "BlinkMacSystemFont",
                "Segoe UI",
                "Roboto",
                "Helvetica",
                "Arial",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol"
            );

            & [data-part="tableCaption"] {
                padding-inline: 12px;
                padding-block: 20px;
                font-size: 1.125rem;
                font-weight: 600;
                text-align: start;
                &.caption-bottom,
                .caption-bottom & {
                    caption-side: bottom;
                }
            }

            & [data-part="tableHead"] {
                /* non-button text */
                & th {
                    font-weight: 700;
                    font-size: 0.91rem;
                    text-align: start;
                    padding-inline: 12px;
                    &:not([aria-sort]) button span::after {
                        content: "\2195";
                    }
                    &[aria-sort="descending"] button span::after {
                        content: "\2193";
                    }
                    &[aria-sort="ascending"] button span::after {
                        content: "\2191";
                    }
                    &:has(button) {
                        padding: 0;
                    }
                    /* button text */
                    & button.column__sorter {
                        align-items: center;
                        background: transparent;
                        border: none;
                        display: flex;
                        flex-wrap: nowrap;
                        font-size: 0.85rem;
                        font-weight: 600;
                        gap: 0.75rem;
                        justify-content: space-between;
                        line-height: 1;
                        min-height: 3rem;
                        padding-block: 0;
                        padding-inline: 12px;
                        text-align: start;
                        width: 100%;
                        &:hover {
                            background-color: var(--nys-color-black-transparent-100, #0000001a);
                        }
                        &:focus-visible {
                            outline: solid var(--nys-border-width-md, 2px) var(--nys-color-focus, #004dd1);
                        }
                        & span[aria-hidden] {
                            flex-shrink: 1;
                            font-size: 1.25rem;
                            text-align: center;
                        }
                    }
                    &[aria-sort] button.column__sorter {
                        background-color: var(--nys-color-blue-100, #cce0f6);
                        &:hover {
                            background-color: var(--nys-color-blue-200, #a3c2ee);
                        }
                    }
                }
            }

            & [data-part="tableBody"] {
                td {
                    padding-block: 12px;
                    padding-inline: 12px;
                    vertical-align: top;
                    &.align-end {
                        text-align: end;
                    }
                    &.align-center {
                        text-align: center;
                    }
                    &[data-state="sorted"] {
                        background-color: var(--nys-color-blue-10, #f2f7fc);
                    }
                }
                th[scope="row"] {
                    text-align: start;
                }
            }
        }
    }
}