Common CSS reset breaks button-group spacings

[md-mcrutch]

A common broad-stroke approach to a CSS reset often includes removing the margin (and padding) from all elements:

* {
  margin: 0;
}

Whether or not this is a sensible thing to do is up for debate, but it does break the spacing between buttons in an <sl-button-group> or <sl-radio-group>. Instead of the buttons overlapping so that just a single pixel line divides them, both borders are visible (i.e. it appears as a 2px separator between the buttons).

I believe this is due to this line in the code: https://github.com/shoelace-style/shoelace/blob/1fb72ad4eb7923a41494e139fc46ff6b8efd63aa/src/components/button/button.styles.ts#L565C40-L565C63

/* All except the first */
:host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
  margin-inline-start: calc(-1 * var(--sl-input-border-width));
}

Because this is set on the :host, it's overridden by the page style.

Here's a pen that shows the issue - comment out the global style to toggle back and forth: https://codepen.io/md-mark/pen/xxvZazY?editors=1100

I'd like to suggest adding an !important to this line to prevent page styles from inadvertently affecting the layout of these grouped buttons.