/**
 * NYSA11y Accordion (native)
 * <details><summary>
 */
@layer nysa11y {
    body:has(.nysa11y) {
        details.nysa11y.accordion[data-component="accordion"][data-html="native"] {
            --nysa11y-chevron-rotation-time: 0.3s;
            *,
            *:before,
            *:after {
                box-sizing: border-box;
            }
            font-family:
                "Proxima Nova",
                -apple-system,
                "BlinkMacSystemFont",
                "Segoe UI",
                "Roboto",
                "Helvetica",
                "Arial",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol";
            & summary {
                background-color: var(--nys-color-neutral-50, #ededed);
                border-radius: 0.25rem;
                color: var(--nys-color-ink, #1b1b1b);
                display: flex;
                font-size: var(--nys-type-size-ui-xl, 20px);
                font-weight: var(--nys-font-weight-bold, 700);
                gap: 0.5rem;
                line-height: 1.5rem;
                list-style-type: none;
                padding-block: 1rem;
                padding-inline: 1rem;
                word-break: break-word;
                &::before {
                    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='%231b1b1b' points='14.724 12.486, 7.375 19.835, 7.013 20.710, 7.400 21.585, 8.275 21.960, 9.150 21.585, 16.849 13.911, 17.298 13.236, 17.448 12.486, 17.298 11.737, 16.849 11.062, 9.150 3.363, 8.262 3.000, 7.375 3.388, 7.000 4.263, 7.375 5.138, 14.724 12.486'/%3E%3C/svg%3E%0A");
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    flex-shrink: 0;
                    height: 1.5rem;
                    width: 1.5rem;
                    transform: rotate(0deg);
                    transition: transform var(--nysa11y-chevron-rotation-time);
                }
                &:focus-visible {
                    outline: solid var(--nys-border-width-md, 2px)
                        var(--nys-color-focus, #004dd1);
                    outline-offset: var(--nys-space-2px, 2px);
                }
                &:hover,
                &:focus {
                    background-color: var(
                        --nys-accordion-background-color--header--hover,
                        var(--nys-color-neutral-100, #d0d0ce)
                    );
                }
                &::-webkit-details-marker,
                &::marker {
                    content: "";
                    display: none;
                }
            }
            &::details-content {
                opacity: 0;
                transition: opacity var(--nysa11y-chevron-rotation-time)
                    ease-in-out;
            }
            &[open] {
                summary {
                    border-end-end-radius: 0;
                    border-end-start-radius: 0;
                    &::before {
                        transform: rotate(90deg);
                    }
                }
                &::details-content {
                    background-color: var(--nys-color-ink-reverse, #ffffff);
                    opacity: 1;
                    padding-block: 1rem;
                    padding-inline: 1.25rem;
                }
            }
        }
    }
}