/**
 * @file Button Groups (Pattern)
 * @description Container for arranging multiple buttons (.bns).
 * Supports complex alignment, spacing, reverse capability and wrapping.
 *
 * @usage
 * <!-- Emmet: div.bns>(a.bn+a.bn.out) -->
 */

:where(.bns, .bnc, .bnf, [data-group~="buttons"], [data-group~="buttons"]:is([data-group~="centered"], [data-group~="full"])) {
    --_d: var(--bns-d, flex);
    display: var(--_d);

    --_fxd: var(--bns-fxd, row);
    flex-direction: var(--_fxd);

    --_ai: var(--bns-ai, center);
    align-items: var(--_ai);

    --_ac: var(--bns-ac, stretch);
    align-content: var(--_ac);

    --_jc: var(--bns-jc);
    justify-content: var(--_jc);

    --_as: var(--bns-as);
    align-self: var(--_as);

    /* Gap */

    /* Section Gap */
    --_bns-g--: var(--bns-g--, var(---s, clamp(1rem, calc(1rem + 0.25 * (100cqi - 33rem) / 55), 1.25rem)));
    --bns-rg: var(--_bns-g--);
    --bns-cg: var(--_bns-g--);

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


    --_fxw: var(--bns-fxw, wrap);
    flex-wrap: var(--_fxw);

    --_mis: var(--bns-mis, 0);
    min-inline-size: var(--_mis, 0);

    --_is: var(--bns-is, var(--bns-w, 100%));
    inline-size: var(--_is);

    --_mais: var(--bns-maw);
    max-inline-size: var(--_mais);


    --_mis: var(--bns-mis--sm, var(--bns-mis, 0));
    --_mie: var(--bns-mie--sm, var(--bns-mie, 0));
    --_mi: var(--_mis) var(--_mie);
    margin-inline: var(--_mi);
}

/*
 * Container Query
 */

:where(:not(.g, [data-display~="grid"],  .sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"], .f, [data-display="flex"], .fxc, .col, [data-direction="column"], .fxr, .row, [data-direction="row"], :where(.s, [data-layout="section"]) > *, .block-library-block__reusable-block-container)>:where(.bns, .bnc, .bnf, [data-reponsive="buttons"])) {
    --_c-name: var(--c-name, bnp);
    --_c-type: var(--c-type, inline-size);
    container: var(--_c-name, bnp) / var(--_c-type, inline-size);

    --_bxsz: border-box;
    box-sizing: var(--_bxsz);

    --_miis: var(--miis, var(--c-miw, 0));
    min-inline-size: var(--_miis);

    --_is: var(--is, var(--c-w, 100%));
    inline-size: var(--_is);

    --_mais: var(--mais, var(--c-maw, 100%));
    max-inline-size: var(--_mais);
}

@container (width < 30rem) {
    :where(.bns, .bnc, .bnf, [data-group~="buttons"], [data-group~="buttons"]:is([data-group~="centered"], [data-group~="full"])) {

        /* Alignment */
        --_ai: var(--bns-ai--sm, var(--bns-ai, center));
        --_ac: var(--bns-ac--sm, var(--bns-ac, stretch));
        --_jc: var(--bns-jc--sm, var(--bns-jc));
        --_as: var(--bns-as--sm, var(--bns-as));


        /* Flex Wrap */
        --_fxw: var(--bns-fxw--sm, var(--bns-fxw, wrap));


        /* Gap */
        --_g: var(--bns-g--sm, var(--bns-g, var(--_rg, var(--bns-rg--sm, var(--bns-rg))) var(--_cg, var(--bns-cg--sm, var(--bns-cg)))));



        /* Inline and Max-Inline Size / Width */
        --_is: var(--bns-is--sm, var(--bns-is, var(--bns-w--sm, var(--bns-w, 100%))));
    }
}

@container (30rem <=width <=60rem) {
    :where(.bns, .bnc) {

        /* Alignment */
        --_ai: var(--bns-ai--md, var(--bns-ai, center));
        --_ac: var(--bns-ac--md, var(--bns-ac, stretch));
        --_jc: var(--bns-jc--md, var(--bns-jc));
        --_as: var(--bns-as--md, var(--bns-as));


        /* Flex Wrap */
        --_fxw: var(--bns-fxw--md, var(--bns-fxw, wrap));


        /* Gap */
        --_g: var(--bns-g--md, var(--bns-g, var(--_rg, var(--bns-rg--md, var(--bns-rg))) var(--_cg, var(--bns-cg--md, var(--bns-cg)))));


        /* Inline and Max-Inline Size / Width */
        --_is: var(--bns-is--md, var(--bns-is, var(--bns-w--md, var(--bns-w, 100%))));
    }
}

@container (width > 60rem) {
    :where(.bns, .bnc) {

        /* Alignment */
        --_ai: var(--bns-ai--lg, var(--bns-ai, center));
        --_ac: var(--bns-ac--lg, var(--bns-ac, stretch));
        --_jc: var(--bns-jc--lg, var(--bns-jc));
        --_as: var(--bns-as--lg, var(--bns-as));


        /* Flex Wrap */
        --_fxw: var(--bns-fxw--lg, var(--bns-fxw, wrap));


        /* Gap */
        --_g: var(--bns-g--lg, var(--bns-g, var(--_rg, var(--bns-rg--lg, var(--bns-rg))) var(--_cg, var(--bns-cg--lg, var(--bns-cg)))));


        /* Inline and Max-Inline Size / Width */
        --_is: var(--bns-is--lg, var(--bns-is, var(--bns-w--lg, var(--bns-w, 100%))));
    }
}

:where(.bnc, .bnf) {
    --bns-as: center;
    --bns-jc: center;
    --scc-fd: row;
    --scc-w: 100%;
}

:where(.bns.full, .bnc.full) {
    --bns-w: 100%;
}

:where(.bns.full--sm, .bnc.full--sm, .bnf, .fsm) {
    --bn-w--sm: 100%;
}

:where(.bns.c, .bns-c) {
    --bns-jc: center;
    --bns-mis: auto;
    --bns-mie: auto;
}

:where(.bns.c--sm, .bns-c--sm, .bns.c--smd, .bns-c--smd) {
    --bns-jc--sm: center;
    --bns-mis--sm: auto;
    --bns-mie--sm: auto;
}

:where(.bns.c--md, .bns-c--md, .bns.c--smd, .bns-c--smd, .bns.c--mdl, .bns-c--mdl) {
    --bns-jc--md: center;
    --bns-mis--md: auto;
    --bns-mie--md: auto;
}

:where(.bns.c--lg, .bns-c--lg, .bns.c--mdl, .bns-c--mdl) {
    --bns-jc--lg: center;
    --bns-mis--lg: auto;
    --bns-mie--lg: auto;
}

:where(.bns.s, .bns-s) {
    --bns-jc: start;
    --bns-mie: auto;
}

:where(.bns.s--sm, .bns-s--sm, .bns.s--smd, .bns-s--smd) {
    --bns-jc--sm: start;
    --bns-mie--sm: auto;
}

:where(.bns.s--md, .bns-s--md, .bns.s--smd, .bns-s--smd, .bns.s--mdl, .bns-s--mdl) {
    --bns-jc--md: start;
    --bns-mie--md: auto;
}

:where(.bns.s--lg, .bns-s--lg, .bns.s--mdl, .bns-s--mdl) {
    --bns-jc--lg: start;
    --bns-mie--lg: auto;
}

:where(.bns.e, .bns-e) {
    --bns-jc: end;
    --bns-mis: auto;
}

:where(.bns.e--sm, .bns-e--sm, .bns.e--smd, .bns-e--smd) {
    --bns-jc--sm: end;
    --bns-mis--sm: auto;
}

:where(.bns.e--md, .bns-e--md, .bns.e--smd, .bns-e--smd, .bns.e--mdl, .bns-e--mdl) {
    --bns-jc--md: end;
    --bns-mis--md: auto;
}

:where(.bns.e--lg, .bns-e--lg, .bns.e--mdl, .bns-e--mdl) {
    --bns-jc--lg: end;
    --bns-mis--lg: auto;
}

:where(.bns):where(.i1, .is, .il, .o-1, .o-f, .o-s) {
    --icn-o: -69;
}

:where(.bns):where(.i2, .ie, .ir, .o-2, .o-l, .o-e) {
    --icn-o: 69;
}

:where(.bns, .bnc, .bnf, [data-group~="buttons"], [data-group~="buttons"]:is([data-group~="centered"], [data-group~="full"])) > :where(div:has(.bn, [data-pattern="button"])) {
	--_is: var(--bn-is, var(--bn-w, fit-content));
    inline-size: var(--_is);
}

@container (width < 30rem) {
    :where(.bns, .bnc, .bnf, [data-group~="buttons"], [data-group~="buttons"]:is([data-group~="centered"], [data-group~="full"])) > :where(div:has(.bn, [data-pattern="button"])) {
		--_is: var(--bn-is--sm, var(--bn-is, var(--bn-w--sm, var(--bn-w, fit-content))));
	}
}