From 7c53988b3f98a52c426c9f3c731dbb9fd7823534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor-baer@users.noreply.github.com>
Date: Mon, 11 Sep 2023 21:34:55 +0200
Subject: [PATCH] Fix style specificity in the ButtonGroup (#2246)

---
 .changeset/breezy-starfishes-move.md          |  5 +++
 .../ButtonGroup/ButtonGroup.module.css        | 32 +++++++++----------
 2 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/breezy-starfishes-move.md

diff --git a/.changeset/breezy-starfishes-move.md b/.changeset/breezy-starfishes-move.md
new file mode 100644
index 0000000000..0033ad2040
--- /dev/null
+++ b/.changeset/breezy-starfishes-move.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the spacing inside a ButtonGroup.
diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css
index 2a0301c27b..1519582d22 100644
--- a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css
+++ b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css
@@ -24,12 +24,12 @@
 }
 
 @media (max-width: 479px) {
-  .secondary {
+  .base .secondary {
     margin-top: var(--cui-spacings-mega);
   }
 
   /* stylelint-disable-next-line no-duplicate-selectors -- Keep in sync with the .tertiary class in Button.module.css */
-  .secondary {
+  .base .secondary {
     padding-right: 0;
     padding-left: 0;
     color: var(--cui-fg-accent);
@@ -37,49 +37,49 @@
     border-color: transparent;
   }
 
-  .secondary:hover {
+  .base .secondary:hover {
     color: var(--cui-fg-accent-hovered);
     background-color: transparent;
     border-color: transparent;
   }
 
-  .secondary:active,
-  .secondary[aria-expanded='true'],
-  .secondary[aria-pressed='true'] {
+  .base .secondary:active,
+  .base .secondary[aria-expanded='true'],
+  .base .secondary[aria-pressed='true'] {
     color: var(--cui-fg-accent-pressed);
     background-color: transparent;
     border-color: transparent;
   }
 
-  .secondary:disabled,
-  .secondary[disabled] {
+  .base .secondary:disabled,
+  .base .secondary[disabled] {
     color: var(--cui-fg-accent-disabled);
     background-color: transparent;
     border-color: transparent;
   }
 
-  .secondary.destructive {
+  .base .secondary.destructive {
     color: var(--cui-fg-danger);
   }
 
-  .secondary.destructive:hover {
+  .base .secondary.destructive:hover {
     color: var(--cui-fg-danger-hovered);
   }
 
-  .secondary.destructive:active,
-  .secondary.destructive[aria-expanded='true'],
-  .secondary.destructive[aria-pressed='true'] {
+  .base .secondary.destructive:active,
+  .base .secondary.destructive[aria-expanded='true'],
+  .base .secondary.destructive[aria-pressed='true'] {
     color: var(--cui-fg-danger-pressed);
   }
 
-  .secondary.destructive:disabled,
-  .secondary.destructive[disabled] {
+  .base .secondary.destructive:disabled,
+  .base .secondary.destructive[disabled] {
     color: var(--cui-fg-danger-disabled);
   }
 }
 
 @media (min-width: 480px) {
-  .secondary {
+  .base .secondary {
     margin-right: var(--cui-spacings-mega);
   }
 }