fix(styles): wrap button group overflow (#3062)

.changeset/yellow-spies-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Implemented button wrapping for overflow in button groups.

packages/styles/src/components/button-group.scss

@@ -6,31 +6,21 @@
 
 @use './../mixins/utilities';
 @use './../variables/color';
+@use './../variables/spacing';
 @use './../variables/components/button';
 @use './../variables/components/forms';
 
 .btn-group {
   max-width: 100%;
+  flex-wrap: wrap;
+  row-gap: spacing.$size-micro;
+  padding-inline-start: button.$btn-border-width;
 
   > .btn {
     white-space: normal;
     cursor: pointer;
-
-    // added a transition delay on the "z-index" so the button only moves back after all other transitions
-    z-index: 0;
-    transition:
-      z-index 0s ease (0.5 * button.$btn-transition-duration),
-      button.$btn-transition;
-
-    @include utilities.high-contrast-mode() {
-      transition: none !important;
-    }
-  }
-
-  > .btn:hover {
-    // remove the transition delay on the "z-index" for all raised states so the button moves forward before other transitions
-    z-index: 2 !important;
-    transition: button.$btn-transition;
+    flex: 0 1 auto;
+    margin-inline-start: -1 * button.$btn-border-width;
   }
 
   > .btn-secondary {