{"version":3,"file":"buttonGroup.module.mjs","names":[],"sources":["../../../../package/common/buttonGroup/buttonGroup.module.pcss"],"sourcesContent":[".buttonGroup {\n  display: inline-flex;\n  align-items: stretch;\n\n  /* At a fractional scale two overlapping borders round to different device pixels, so each seam\n     keeps one: the earlier child clips its shared 1px, or the next one does while the earlier has\n     the focus (docs/ButtonGroup.md). Reset per group so a nested one starts clean. */\n  --group-clip-start: initial;\n  --group-clip-end: initial;\n\n  /* Each rule below targets its position with a pseudo-class (:first-child, :last-child, or\n     :not()), which contributes extra specificity beyond a plain class selector. That's what\n     reliably beats a child component's own base border-radius rule (e.g. Button's), regardless\n     of which CSS module happens to load first in the final bundle — a plain \".buttonGroup > *\"\n     reset would tie on specificity with Button's own class and depend on load order.\n\n     Alongside the direct border-radius reset (for a child whose visible border lives right on\n     its own root, e.g. Button), each rule also sets --group-radius-* custom properties. Unlike\n     border-radius itself, custom properties inherit through every descendant regardless of\n     nesting depth, so a child whose actual border lives on a nested element (e.g. Input's\n     `fieldset`, buried inside a `<label>`) can flatten correctly too, as long as that nested\n     element's own border-radius reads `var(--group-radius-tl, var(--default-border-radius))`\n     etc. instead of hardcoding `var(--default-border-radius)` — see input.module.pcss.\n\n     A nested ButtonGroup (role=\"group\") is excluded throughout: it manages its own corners and\n     spacing internally, so the outer group only arranges it as a self-contained unit rather than\n     reaching into it. */\n  > *:not(:first-child):not(:last-child):not([role='group']) {\n    border-radius: 0;\n\n    --group-radius-tl: 0;\n    --group-radius-tr: 0;\n    --group-radius-br: 0;\n    --group-radius-bl: 0;\n  }\n\n  > *:hover,\n  > *:focus-within {\n    z-index: 1;\n  }\n\n  &:not(&-vertical) {\n    /* A separator (e.g. a vertical Divider) is meant to stay visible between two buttons, not\n       merge into one of them, so it's excluded from the border-collapsing overlap below — and\n       so is whatever comes right after one, since that overlap is only meant to collapse two\n       adjacent button borders, not eat into the separator itself. A nested ButtonGroup is\n       excluded the same way, and given real spacing instead, rather than being squeezed 1px\n       into whatever's next to it. */\n    > *:not(:first-child):not([role='separator']):not([role='group']) {\n      margin-left: -1px;\n    }\n\n    > *:not([role='separator']):not([role='group']):has(+ :not([role='separator']):not([role='group'])) {\n      --group-clip-end: 1px;\n\n      clip-path: inset(-100vmax var(--group-clip-end, -100vmax) -100vmax var(--group-clip-start, -100vmax));\n    }\n\n    > *:not([role='separator']):not([role='group']):has(+ :not([role='separator']):not([role='group'])):focus-within {\n      --group-clip-end: initial;\n    }\n\n    > :focus-within:not([role='separator']):not([role='group']) + *:not([role='separator']):not([role='group']) {\n      --group-clip-start: 1px;\n\n      clip-path: inset(-100vmax var(--group-clip-end, -100vmax) -100vmax var(--group-clip-start, -100vmax));\n    }\n\n    /* Matches the specificity of the collapse rule above (three :not()s deep, not two) so this\n       reliably wins the override regardless of source order — the collapse rule's own three\n       :not()s (:first-child, [role=separator], [role=group]) outweigh an adjacency selector with\n       only one, so a fourth, redundant :not() is added here purely to close that gap. The\n       trailing :not([role='group']) on both lines also keeps this from matching when the\n       following element is itself a nested group — that case must fall through to the dedicated\n       8px group-spacing rule below, not get zeroed. */\n    > [role='separator'] + *:not(:first-child):not([role='group']),\n    > [role='group'] + *:not(:first-child):not([role='separator']):not([role='group']) {\n      margin-left: 0;\n    }\n\n    > [role='group']:not(:first-child) {\n      margin-left: 8px;\n    }\n\n    > *:first-child:not(:last-child):not([role='group']) {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      --group-radius-tr: 0;\n      --group-radius-br: 0;\n    }\n\n    > *:last-child:not(:first-child):not([role='group']) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      --group-radius-tl: 0;\n      --group-radius-bl: 0;\n    }\n  }\n\n  &-vertical {\n    flex-direction: column;\n\n    > *:not(:first-child):not([role='separator']):not([role='group']) {\n      margin-top: -1px;\n    }\n\n    > *:not([role='separator']):not([role='group']):has(+ :not([role='separator']):not([role='group'])) {\n      --group-clip-end: 1px;\n\n      clip-path: inset(var(--group-clip-start, -100vmax) -100vmax var(--group-clip-end, -100vmax) -100vmax);\n    }\n\n    > *:not([role='separator']):not([role='group']):has(+ :not([role='separator']):not([role='group'])):focus-within {\n      --group-clip-end: initial;\n    }\n\n    > :focus-within:not([role='separator']):not([role='group']) + *:not([role='separator']):not([role='group']) {\n      --group-clip-start: 1px;\n\n      clip-path: inset(var(--group-clip-start, -100vmax) -100vmax var(--group-clip-end, -100vmax) -100vmax);\n    }\n\n    > [role='separator'] + *:not(:first-child):not([role='group']),\n    > [role='group'] + *:not(:first-child):not([role='separator']):not([role='group']) {\n      margin-top: 0;\n    }\n\n    > [role='group']:not(:first-child) {\n      margin-top: 8px;\n    }\n\n    > *:first-child:not(:last-child):not([role='group']) {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      --group-radius-bl: 0;\n      --group-radius-br: 0;\n    }\n\n    > *:last-child:not(:first-child):not([role='group']) {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      --group-radius-tl: 0;\n      --group-radius-tr: 0;\n    }\n  }\n}\n"],"mappings":""}