btn-group draws first input margin outside due to negative margin

[2-5]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The left border of the first input in a btn-group is drawn outside parent, potentially being clipped if parent is using overflow-hidden or similar things which hard clip.

The problem appears if input is used before label, as in the Bootstrap documentation. If order is reversed, the output is fine (but there are other issues).

It seems this is the root source, for some reason .btn:not(:first-child) doesn't work as expected, it seems it applies to all children without filtering based on .btn class.

.btn-group {
  // Prevent double borders when buttons are next to each other
  > .btn:not(:first-child),
  > .btn-group:not(:first-child) {
    margin-left: -$btn-border-width;
  }
}

Real world regression:

Bootstrap 4.6:

Bootstrap 5.2:

Reduced test cases

https://codepen.io/costka/pen/BarRZda

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.0

[2-5]

FWIW using :nth-child(2) instead of :first-child fixes the problem for me, not sure if it has other side-effects:

.btn-group {
  > .btn:not(:nth-child(2)),
  > .btn-group:not(:nth-child(2)) {
    margin-left: -$btn-border-width;
  }
}