Active Nav Tabs are not displayed correctly in the current main branch

[jonnysp]

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

current release looks good https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior

current brunch looks bad https://twbs-bootstrap.netlify.app/docs/5.1/components/navs-tabs/#javascript-behavior

Reduced test cases

https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior
https://twbs-bootstrap.netlify.app/docs/5.1/components/navs-tabs/#javascript-behavior

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

Windows

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

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

v5.1.3 and Current main Brunch

[mdo]

Same applies to our list groups and pagination. This is because we were doing some lazy Sass math like -$list-group-border-width, which with the CSS vars change for border-width, was generating -var(--bs-border-width) in our compiled CSS.

This does make me think we could either fix the problem with calc(), or we could call this a breaking change and drop it until a v6 when we can clean up all these things. I'm 50/50 and could go either way.

Thoughts?

[jonnysp]

works for me, can be applied