What does this MR do?

Reduces the number of SCSS selector depth from 6 to 5 by removing selectors.

Are there points in the code the reviewer needs to double check?

No.

Why was this MR needed?

Nesting 5 times in SCSS is too complicated.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• [n/a] Documentation created/updated
• [n/a] API support added
• [n/a] Tests added for this feature/bug
• Review
  • [n/a] Has been reviewed by UX
  • Has been reviewed by Frontend
  • [n/a] Has been reviewed by Backend
  • [n/a] Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• [n/a] Internationalization required/considered
• [n/a] End-to-end tests pass (package-and-qa manual pipeline job)

What are the relevant issue numbers?

Part of #39584 (moved)

Similar to !17820 (merged)