refactor: clean up button-group styles

[lex111]

No description provided.

[lex111]

Doesn't make sense, don't know why it's needed at all.

[github-actions]

Dist CSS Diff

diff --git a/packages/core/dist/css/default/default.css b/packages/core/dist-branch/css/default/default.css
index 4266566..1e0eba0 100644
--- a/packages/core/dist/css/default/default.css
+++ b/packages/core/dist-branch/css/default/default.css
@@ -293,7 +293,7 @@
   --ifm-button-border-radius: calc(
     var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
   );
-  --ifm-button-group-margin: 2px;
+  --ifm-button-group-spacing: 2px;
   --ifm-card-background-color: var(--ifm-background-surface-color);
   --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
   --ifm-card-horizontal-spacing: var(--ifm-global-spacing);
@@ -2006,12 +2006,12 @@ hr {
 
 .button-group {
   display: inline-flex;
+  gap: var(--ifm-button-group-spacing);
 }
 
 .button-group > .button:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: var(--ifm-button-group-margin);
     }
 
 .button-group > .button:not(:last-child) {
@@ -2019,10 +2019,6 @@ hr {
       border-top-right-radius: 0;
     }
 
-.button-group > .button--active {
-      z-index: 1; /* Make the active button's border take precedence. */
-    }
-
 .button-group--block {
     display: flex;
     justify-content: stretch;

[github-actions]

Size Change: -684 B (0%)

Total Size: 569 kB

Filename	Size	Change
./packages/core/dist/css/default-dark/default-dark-rtl.css	82.6 kB	-125 B (0%)
./packages/core/dist/css/default-dark/default-dark-rtl.min.css	58 kB	-47 B (0%)
./packages/core/dist/css/default-dark/default-dark.css	82.5 kB	-124 B (0%)
./packages/core/dist/css/default-dark/default-dark.min.css	58 kB	-46 B (0%)
./packages/core/dist/css/default/default-rtl.css	80.5 kB	-125 B (0%)
./packages/core/dist/css/default/default-rtl.min.css	56.9 kB	-47 B (0%)
./packages/core/dist/css/default/default.css	80.5 kB	-124 B (0%)
./packages/core/dist/css/default/default.min.css	56.8 kB	-46 B (0%)

ℹ️ View Unchanged

Filename	Size
./packages/core/dist/js/alerts.js	409 B
./packages/core/dist/js/alerts.min.js	409 B
./packages/core/dist/js/button-groups.js	267 B
./packages/core/dist/js/button-groups.min.js	267 B
./packages/core/dist/js/dropdowns.js	1.01 kB
./packages/core/dist/js/dropdowns.min.js	1.01 kB
./packages/core/dist/js/menu.js	2.4 kB
./packages/core/dist/js/menu.min.js	2.4 kB
./packages/core/dist/js/navbar.js	1.08 kB
./packages/core/dist/js/navbar.min.js	1.08 kB
./packages/core/dist/js/pills.js	270 B
./packages/core/dist/js/pills.min.js	270 B
./packages/core/dist/js/radio-behavior.js	705 B
./packages/core/dist/js/radio-behavior.min.js	705 B
./packages/core/dist/js/tabs.js	267 B
./packages/core/dist/js/tabs.min.js	267 B

_{compressed-size-action}

[netlify]

✅ Deploy Preview for infima ready!

Name	Link
🔨 Latest commit	bce6aad
🔍 Latest deploy log	https://app.netlify.com/sites/infima/deploys/6268c4a5abebcb0008e0eb50
😎 Deploy Preview	https://deploy-preview-246--infima.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Josh-Cena]

Support for gap seems inadequate: only 88%. Should we have some policies about what percentage we aim to support? (I also don't know if it can be mitigated through autoprefixing/etc. but from the dist CSS it seems unlikely)

[lex111]

It's a pretty big support (eg margin-top has 94.5% support, not 100%), all major browsers support it, we already actively use this property in other places, so shouldn't be any problem here.

[Josh-Cena]

OK let's do this 👍

margin-top not having 100% is because there's unknown support, though, not because it's actually unsupported