/**
 * NYSA11y Button
 * <button>
 * Work in Progress, not complete.
 * Goal: wrap to two lines without increase from default height
 */
@layer nysa11y {
    body:has(.nysa11y) {
        button.nysa11y.button[data-component="button"][data-html="native"] {
            *,
            *:before,
            *:after {
                box-sizing: border-box;
            }
            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"
            );
            align-items: center;
            background-color: var(--nys-button-background-color, #154973);
            border-color: var(--nys-button-border-color, transparent);
            border-radius: var(--nys-radius-xl, 12px);
            border-width: var(--nys-border-width-md, 2px);
            color: var(--nys-button-color, #ffffff);
            display: flex;
            font-size: 1rem;
            font-weight: var(--nys-font-weight-semibold, 600);
            line-height: 1;
            min-height: var(--nys-size-600, 3rem);
            padding-block: 0.25rem;
            padding-inline: 1.125rem;
            &.small {
                min-height: 2.5rem;
            }
            &.large {
                min-height: 3.5rem;
            }
            &:focus-visible {
                outline: solid var(--nys-border-width-md, 2px) var(--nys-color-focus, #004dd1);
                outline-offset: var(--nys-border-width-md, 2px);
            }
            &.ghost {
                background-color: transparent;
                color: var(--nys-button-color, #1b1b1b);
            }
            &:hover {
                background-color: var(--nys-button-background-color--hover, #0e324f);
                &.ghost {
                    background-color: var(--nys-color-black-transparent-100, #0000001a);
                }
            }
            &:active {
                background-color: var(--nys-button-background-color--active, #081b2b);
                &.ghost {
                    background-color: var(--nys-color-black-transparent-200, #00000033);
                }
            }
            & .button__accname {
                /* magic number */
                /*margin-block-start: calc(0.125rem * -1);*/
            }
        }
    }
}