chore(button-group): clean up styles

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

@@ -15,6 +15,10 @@
 @use '../lightbox-media-viewer';
 @use '../button';
 
+/**
+ * This file is no longer used by the button-group components.
+ * It remains here, temporarily, as a source for other styles to extend & use.
+ */
 @mixin button-group {
   :host(#{$c4d-prefix}-button-group-item),
   :host(#{$c4d-prefix}-button-cta) {

packages/web-components/src/components/button-group/button-group-item.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/button';
+
+@mixin button-group-item {
+  :host(#{$c4d-prefix}-button-group-item) {
+    @extend :host(#{$c4d-prefix}-button);
+
+    outline: none;
+    max-width: 100%;
+    min-width: 0;
+
+    ::slotted([slot='icon']) {
+      @media print {
+        fill: $gray-100;
+      }
+    }
+
+    @media print {
+      max-width: 100%;
+      margin-bottom: $spacing-05;
+      display: block;
+    }
+  }
+}
+
+@include button-group-item;

packages/web-components/src/components/button-group/button-group-item.ts

@@ -8,7 +8,7 @@
  */
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import styles from './button-group.scss';
+import styles from './button-group-item.scss';
 import C4DButton from '../button/button';
 
 const { stablePrefix: c4dPrefix } = settings;

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

@@ -5,4 +5,35 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/ibmdotcom-styles/scss/components/button-group';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin button-group {
+  :host(#{$c4d-prefix}-button-group) {
+    --#{$c4d-prefix}--button-group--item-count: 3;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    grid-gap: $spacing-05;
+
+    @include breakpoint(md) {
+      display: inline-grid;
+      grid-template-columns: repeat(
+        var(--#{$c4d-prefix}--button-group--item-count),
+        1fr
+      );
+    }
+
+    @media print {
+      display: block;
+    }
+  }
+}
+
+@include button-group;