// 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+ (4px)
// .bds-button-group--gap-medium    - Medium gap: 16px mobile/tablet, 24px desktop (lg+)
// .bds-button-group--block         - Block layout for 3+ buttons (all tertiary)
//
// Note: Uses centralized spacing tokens from _spacing.scss.

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

.bds-button-group {
  @extend .d-flex;
  @extend .flex-column;
  @extend .flex-wrap;
  align-items: start;
  gap: $bds-space-sm; // 8px - spacing('sm')

  // 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: $bds-space-none; // 0px - spacing('none')
  }
}

.bds-button-group--gap-small {
  // Tablet breakpoint - 4px gap
  @include media-breakpoint-up(md) {
    gap: $bds-space-xs; // 4px - spacing('xs')
  }
}

.bds-button-group--gap-medium {
  gap: $bds-space-lg; // 16px - spacing('lg')

  @include media-breakpoint-up(lg) {
    gap: $bds-space-2xl; // 24px - spacing('2xl')
  }
}

// =============================================================================
// 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: $bds-space-lg !important; // 16px - spacing('lg')

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