/**
 * @file Button Base
 * @description Core structural styles: inline-flex, centered content, cursor pointer.
 * Sets up basic font properties and transitions. Includes States (Hover/Focus).
 *
 * @usage
 * <!-- Emmet: a.bn -->
 * <a class="bn">Action</a>
 */

:where(.bn, [data-pattern="button"]) {
    /* --- Positioning --- */

    --_pos: var(--bn-pos, relative);
    position: var(--_pos);
    --_ins: var(--bn-ins, auto);
    inset: var(--_ins);

    /* --- Base Layout --- */

    --_d: var(--bn-d, inline-flex);
    display: var(--_d);
    --_fxd: var(--bn-fxd, row);
    flex-direction: var(--_fxd);
    --_ai: var(--bn-ai, center);
    align-items: var(--_ai);
    --_jc: var(--bn-jc, center);
    justify-content: var(--_jc);

    --_fxw: var(--bn-fxw, nowrap);
    flex-wrap: var(--_fxw);
    --_fxs: var(--bn-fxs, 0);
    flex-shrink: var(--_fxs);

    --_o: var(--bn-o);
    order: var(--_o);

    /* --- Gap --- */
    --_bn-g--: var(--bn-g--, var(---2xs, clamp(0.75rem, calc(0.75rem + 0.125 * (100cqi - 33rem) / 55), 0.875rem)));
    --bn-rg: var(--_bn-g--);
    --bn-cg: var(--_bn-g--);

    --_rg: initial;
    --_cg: initial;

    /* Button Gap Private Declaration */
    --_g: var(--bn-g, var(--_rg, var(--bn-rg)) var(--_cg, var(--bn-cg)));
    gap: var(--_g);


    /* --- Cursor & Text --- */

    --bn-cur: pointer;
    --_cur: var(--bn-cur);
    cursor: var(--_cur);

    --bn-ta: center;
    --_ta: var(--bn-ta);
    text-align: var(--_ta);

    --bn-td: none;
    --_td: var(--bn-td);
    text-decoration: var(--_td);


    /* --- Font & Text --- */

    --_ff: var(--bn-ff, var(--ff--, inherit));
    font-family: var(--_ff);
    --_fz: var(--bn-fz, var(--fz-m, clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 33rem) / 55), 1.25rem)));
    font-size: var(--_fz);
    --_fw: var(--bn-fw, var(--fw-m, 500));
    font-weight: var(--_fw);

    --_lh: var(--bn-lh, var(--lh-xs, 1.125));
    line-height: var(--_lh);
    --_tt: var(--bn-tt, none);
    text-transform: var(--_tt);
    --_whs: var(--bn-whs, nowrap);
    white-space: var(--_whs);


    /* --- Spacing --- */

    /* 'em'-based padding scales with font-size */

    --_pb: var(--bn-pb, var(--bn-pd, var(--bn-pb--, var(---e3xs, .625em))));
    padding-block: var(--_pb);
    --_pi: var(--bn-pi, var(--bn-pd, var(--bn-pi--, var(---em, 1.325em))));
    padding-inline: var(--_pi);

    --_mb: var(--bn-mbs, var(--bn-mb, var(--bn-mg, 0))) var(--bn-mbe, var(--bn-mb, var(--bn-mg, 0)));
    margin-block: var(--_mb);
    --_mi: var(--bn-mis, var(--bn-mi, var(--bn-mg, 0))) var(--bn-mie, var(--bn-mi, var(--bn-mg, 0)));
    margin-inline: var(--_mi);


    /* --- Appearance (The API) --- */

    --_c: var(--bn-c, var(--on-p, var(--d, #131313)));
    color: var(--_c);

    --_bg: var(--bn-bg, var(--p, #eec14c));
    background-color: var(--_bg);

    --_op: var(--bn-op, 1);
    opacity: var(--_op);


    --_bdw: var(--bn-bdw, var(--bdw--, .125rem));
    --_bds: var(--bn-bds, solid);

    --_bdc: var(--bn-bdc, var(--bn-bg, var(--out-p, var(--p, #eec14c))));
    --_bd: initial;
    border: var(--_bd, var(--_bdw) var(--_bds) var(--_bdc));

    --_rad: var(--bn-rad, var(--bn-rad--, var(--rad-xe, 4em)));
    border-radius: var(--_rad);

    --_bxsh: var(--bn-bxsh, var(--bn-bxsh--ds, var(--bn-bxsh--, var(--bxsh--, 0 .25em 2em .75em)))) var(--bn-bxsh-c, var(--bn-bxsh-c--ds, var(--bxsh-c, var(--o-p-xlt, hsl(0 0% 8% / .16)))));
    box-shadow: var(--_bxsh);

    /* --- Animation --- */

    --_trs: var(--bn-trs, var(--bn-trsdu, var(--trsdu, 0.32s)) var(--bn-trstf, var(--trstf, ease-in-out)));
    transition: var(--_trs);

    --_trsp: var(--bn-trsp, background-color, color, opacity, transform, border, border-color, box-shadow, fill, stroke);
    transition-property: var(--_trsp);
    --_trf: var(--bn-trf);
    transform: var(--_trf);

    /* --- Sizing --- */

    --_is: var(--bn-is, var(--bn-w, fit-content));
    inline-size: var(--_is);
    --_miis: var(--bn-miis, var(--bn-miw, auto));
    min-inline-size: var(--_miis);

    --bn-mih: var(--bn-mih--, calc(var(--bn-fz, 1.125rem) * var(--bn-lh, 1.125) + var(--_pb, .625em) * 2 + var(--_bdw, .125rem) * 2));
    --_mibs: var(--bn-mibs, var(--bn-mih, fit-content));
    min-block-size: var(--_mibs);

    --_pe: var(--bn-pe, auto);
    pointer-events: var(--_pe);


}

:where(.bn, [data-pattern="button"]):where(a, button, [role="button"], input:is([type="button"], [type="submit"], [type="reset"])) {
	appearance: none;
	-webkit-appearance: none;
}

:where(.bn, [data-pattern="button"]) :where(span, div, p) {

    /* --- Font & Text --- */

    font-family: var(--_ff, var(--bn-ff, inherit));
    font-size: var(--_fz, var(--bn-fz, inherit));
    /* font-weight: var(--_fw, var(--bn-fw, inherit)); */
    line-height: var(--_lh, var(--bn-lh, inherit));
    text-transform: var(--_tt, var(--bn-tt, inherit));
    white-space: var(--_whs, var(--bn-whs, inherit));

    --_fw: var(--bn-fw, var(--fw-m, 500));
    font-weight: var(--_fw);

    --bn-ta: left;
    --_ta: var(--bn-ta);
    text-align: var(--_ta);


    /* --- Appearance (The API) --- */

    transition: var(--_trs);
    transition-property: var(--_trsp);

    --_c: inherit;
    color: var(--_c);

}

:where(.bn, [data-pattern="button"]):where(.full) {
    --bn-w: 100%;
}

@container (width < 30rem) {

    :where(.bn, [data-pattern="button"]) {
        --_pb: var(--bn-pb--sm, var(--bn-pb, var(--bn-pd--sm, var(--bn-pd, var(--bn-pb--, .625em)))));
        --_pi: var(--bn-pi--sm, var(--bn-pi, var(--bn-pd--sm, var(--bn-pd, var(--bn-pi--, 1.325em)))));

        --_is: var(--bn-is--sm, var(--bn-is, var(--bn-w--sm, var(--bn-w, fit-content))));
        --_miis: var(--bn-miis--sm, var(--bn-miis, var(--bn-miw--sm, var(--bn-miw, auto))));

        --_mibs: var(--bn-mibs--sm, var(--bn-mibs, var(--bn-mih--sm, var(--bn-mih, fit-content))));
    }

}

:where(.bn, [data-pattern="button"]):where(.full--sm, .full--smd) {
    --bn-w--sm: 100%;
}

@container (30rem <=width <=60rem) {

    :where(.bn, [data-pattern="button"]) {
        --_pb: var(--bn-pb--md, var(--bn-pb, var(--bn-pd--md, var(--bn-pd, var(--bn-pb--, .625em)))));
        --_pi: var(--bn-pi--md, var(--bn-pi, var(--bn-pd--md, var(--bn-pd, var(--bn-pi--, 1.325em)))));

        --_is: var(--bn-is--md, var(--bn-is, var(--bn-w--md, var(--bn-w, fit-content))));
        --_miis: var(--bn-miis--md, var(--bn-miis, var(--bn-miw--md, var(--bn-miw, auto))));

        --_mibs: var(--bn-mibs--md, var(--bn-mibs, var(--bn-mih--md, var(--bn-mih, fit-content))));
    }

}

:where(.bn, [data-pattern="button"]):where(.full--md, .full--smd, .full--mdl) {
    --bn-w--md: 100%;
}



@container (width > 60rem) {

    :where(.bn, [data-pattern="button"]) {
        --_pb: var(--bn-pb--lg, var(--bn-pb, var(--bn-pd--lg, var(--bn-pd, var(--bn-pb--, .625em)))));
        --_pi: var(--bn-pi--lg, var(--bn-pi, var(--bn-pd--lg, var(--bn-pd, var(--bn-pi--, 1.325em)))));

        --_is: var(--bn-is--lg, var(--bn-is, var(--bn-w--lg, var(--bn-w, fit-content))));
        --_miis: var(--bn-miis--lg, var(--bn-miis, var(--bn-miw--lg, var(--bn-miw, auto))));

        --_mibs: var(--bn-mibs--lg, var(--bn-mibs, var(--bn-mih--lg, var(--bn-mih, fit-content))));
    }

}

:where(.bn, [data-pattern="button"]):where(.full--lg, .full--mdl) {
    --bn-w--lg: 100%;
}

/**
 * @group States
 */

/* Hover */

:where(.bn, [data-pattern="button"]):where(:hover) {

    --_c: var(--bn-c--hv, var(--on-a, var(--d-bd, #000)));
    --_bg: var(--bn-bg--hv, var(--a, #ffb900));

    --_bdc: var(--bn-bdc--hv, var(--bn-bg--hv, var(--out-a, var(--a, #ffb900))));

    --_op: var(--bn-op--hv, var(--bn-op, 1));

    --_bxsh: var(--bn-bxsh--hv, var(--bn-bxsh--av, var(--bn-bxsh, var(--bn-bxsh--av--, var(--bxsh--av--, 0 .375em 2em .875em))))) var(--bn-bxsh-c--hv, var(--bn-bxsh-c--av, var(--bn-bxsh-c, var(--bxsh-c--av, var(--o-a-lt, hsl(0 0% 8% / .32))))));

    --_trs: var(--bn-trs--hv, var(--bn-trsdu--hv, var(--trsdu--hv, 0.16s)) var(--bn-trstf--hv, var(--bn-trstf, var(--trstf, ease-in-out))));
}

:where(.bn, [data-pattern="button"]):where(a, button, [role="button"], input:is([type="button"], [type="submit"], [type="reset"])):where(:hover) {
    --_trf: var(--bn-trf--hv, translatey(var(--trf-ty--hv, -0.125em)));
	     will-change: transform;
}

/* Focus */

:where(.bn, [data-pattern="button"]):where(:focus-visible) {

    --_olw: var(--bn-olw, .25rem);
    --_ols: var(--bn-ols, solid);
    --_olc: var(--bn-olc, var(--bn-bg, var(--out-p, var(--p, #eec14c))));
    outline: var(--_ol, var(--_olw) var(--_ols) var(--_olc));

    --_olo: var(--bn-olo, var(--olo--, .25rem));
    outline-offset: var(--_olo);

    --_bxsh: var(--bn-bxsh--fv, var(--bn-bxsh--av, var(--bn-bxsh, var(--bn-bxsh--av--, var(--bxsh--av--, 0 .375em 2em .875em))))) var(--bn-bxsh-c--fv, var(--bn-bxsh-c--av, var(--bn-bxsh-c, var(--bxsh-c--av, var(--o-a-lt, hsl(0 0% 8% / .32))))));

    --_trf: var(--bn-trf--fv, var(--bn-trf--hv, translatey(var(--trf-ty--hv, -0.125em))));
}

/* Active */

:where(.bn, [data-pattern="button"]):where(:active) {
    --_trs: var(--bn-trs--av, var(--bn-trsdu--av, var(--trsdu--av, 0.16s)) var(--bn-trstf--av, var(--bn-trstf, var(--trstf--av, var(--trstf, ease-in-out)))));
    --_trf: var(--bn-trf--av, translatey(var(--trf-ty--av, 0.0625em)));
}

:where(.bn, [data-pattern="button"]):where(.is-active, .active),
:where(.bn, [data-pattern="button"]):where(.is-active, .active):where(:hover) {
    --_op: var(--bn-op--at, 1);
    --_trf: var(--bn-trf--at, none);

    --bn-cur: var(--bn-cur--at, default);
    --_cur: var(--bn-cur);
}

:where(.bn, [data-pattern="button"]):where(.is-loading, .loading) {
    --_op: var(--bn-op--lo, .64);
    --_cur: var(--bn-cur--lo, wait);
}

/* Disabled */
:where(.bn, [data-pattern="button"]):where(:disabled, .is-disabled, .disabled, .is-muted, .muted, [disabled], [muted], .is-inactive, .inactive, [class*="disabled"], [aria-disabled="true"]),
:where(.bn, [data-pattern="button"]):where(:disabled, .is-disabled, .disabled, .is-muted, .muted, [disabled], [muted], .is-inactive, .inactive, [class*="disabled"], [aria-disabled="true"]):where(:hover) {
    --_c: var(--bn-c--ds, var(--bn-c, currentColor));
    --_bg: var(--bn-bg--ds, var(--bn-bg));
    --_bdc: var(--bn-bdc--ds, var(--bn-bdc, var(--bn-bg--ds, var(--bn-bg))));

    --_op: var(--bn-op--ds, .48);
    --_pe: var(--bn-pe--ds, none);
    --_cur: var(--bn-cur--ds, not-allowed);

    --_trf: var(--bn-trf--ds, none);
    --_bxsh: var(--bn-bxsh--ds, none);
}

@layer reset {
    :where(.bn, [data-pattern="button"]) {
        --bxsh: initial;
        --bxsh--hv: initial;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.bn, [data-pattern="button"]) {
		  --_trs: none;
		  transition: none;
		  --_trf: none;
        transform: none;
    }
}

summary:where(.bn, [data-pattern="button"]) {
    list-style: none;
}
summary:where(.bn, [data-pattern="button"])::-webkit-details-marker {
    display: none;
}