// BDS ButtonGroup Component Styles
// Brand Design System - Responsive button group pattern
//
// Naming Convention: BEM with 'bds' namespace
// .bds-button-group                - Base component
// .bds-button-group--gap-none      - No gap between buttons on tablet+ (0px)
// .bds-button-group--gap-small     - Small gap between buttons on tablet+ (8px)
// .bds-button-group--block         - Block layout for 3+ buttons (all tertiary)

// =============================================================================
// Base Component Styles
// =============================================================================

.bds-button-group {
  @extend .d-flex;
  @extend .flex-column;
  @extend .flex-wrap;
  align-items: start;
  gap: 8px;
  
  // Tablet breakpoint - horizontal layout
  @include media-breakpoint-up(md) {
    flex-direction: row !important;
    align-items: center;
  }
}

// =============================================================================
// Gap Modifiers
// =============================================================================

.bds-button-group--gap-none {
  // Tablet breakpoint - no gap
  @include media-breakpoint-up(md) {
    gap: 0px;
  }
}

.bds-button-group--gap-small {
  // Tablet breakpoint - keep 8px gap
  @include media-breakpoint-up(md) {
    gap: 4px;
  }
}

// =============================================================================
// Block Layout Modifier (3+ buttons)
// =============================================================================

.bds-button-group--block {
  // Override default flex layout - force column layout on all screen sizes
  flex-direction: column !important;
  gap: 16px !important;

  // All buttons should be full width in block layout
  .bds-btn {
    width: 100%;
  }
}