@use '../../compiled/tokens/scss/size';

///
/// Button Group layout object
///
/// 1. Margins are used instead of Flexbox Gap due to browser support (consider
///    changing to Flexbox Gap once browser support is better in the future).

.o-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: size.$spacing-gap-button-group-default;
}

///
/// For use cases when a button has sibling elements, they can all be wrapped
/// with an "item" element to maintain proper layout
///

.o-button-group__item {
  display: flex;
  position: relative;
}

///
/// Full button-width modifier
///

.o-button-group--grow {
  > *,
  .o-button-group__item > * {
    flex: 1 1 0;
  }
}