List-group-item margin-top is offset when importing sass in a nested class

[hadouin]

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

Context

When using list-groups nested inside another class for exemple:

.darkmode
  @import 'bootstrap/scss/list-group';

The list-group-items do not behave correctly especially for borders (see code pen)

Cause

This is due to .list-group-item using a & + & selector. exemple:

.darkmode
  .list-group-item
    & + &
      border-top-width: 0px

compiles to:

.darkmode .list-group-item + .darkmode .list-group-item {
  border-top-width: 0px;
}

What we want

I propose we change the & in scss/_list-group-item.scss to .list-group-item

// ...
& + & { // The Issue would be here to change the second "&" to ".list-group-item"
  border-top-width: 0;

  &.active {
    margin-top: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
    border-top-width: var(--#{$prefix}list-group-border-width);
  }
}

compiled

.darkmode .list-group-item + .list-group-item {
  border-top-width: 0px;
}

Reduced test cases

https://codepen.io/Hadouin/pen/KKopyrW

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

Windows

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

Chrome

What version of Bootstrap are you using?

v5.2.0-beta1

[mdo]

Fwiw, there are other instances of ... + & { } in our codebase. Unsure if we feel the need to revisit all these selectors now, just some, or if we keep things as-is. Thoughts @julien-deramond?