// ============================================================================
// :: Button group
// ============================================================================
/**
 * A component used to group buttons together
 */

// ============================================================================
// :: Settings
// ============================================================================
$spacing: 1.5rem;

// ============================================================================
// :: Root
// ============================================================================
// .m-button-group {}

// ============================================================================
// :: Elements
// ============================================================================
.m-button-group__list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  width: 100%;
  gap: $spacing;

  list-style-type: none;
}

.m-button-group__item {
  display: contents;
  margin: $spacing / 2;

  > * {
    width: 100%;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-button-group--vertical {
  .m-button-group__list {
    flex-direction: column;
    align-items: stretch;
  }
}