.button-group-view {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  width: 100%;
}

.button-group-view[data-wrap-stacked='true'] > * {
  flex-grow: 1;
  flex-basis: 100%;
}

.button-group-view .button-group-button.button-group-button.button-group-button.button-group-button.button-group-button.selected {
  background-color: var(--background-color-blue) !important;
  border-color: var(--background-color-blue) !important;
  color: var(--color-on-solid) !important;
}

.button-group-view .button-group-button.button-group-button.button-group-button.button-group-button.button-group-button.selected:not(.button-weight-static):hover:not(:disabled) {
  background-color: var(--background-color-blue-hover) !important;
  border-color: var(--border-color-blue-hover) !important;
}

.button-group-view .button-group-button.button-group-button.button-group-button.button-group-button.button-group-button.selected:not(.button-weight-static):active:not(:disabled) {
  background-color: var(--background-color-blue-active) !important;
  border-color: var(--border-color-blue-active) !important;
}

.button-group-view {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-horizontal-button);
}