// FoxButtonGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-group (컴포넌트 세트 398:4854)
//
// 시안에서 가져온 건 간격뿐이다 — 크기·방향과 무관하게 `gap/2` 하나다. 그래서 크기별
// 모디파이어가 없다(React 래퍼의 `size`는 자식 버튼에 내려주는 값이지 그룹의 모양이 아니다).
// 나머지 배치 규칙(정렬·줄바꿈)은 시안이 아니라 지시받은 사양이다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-button-group fox-button-group--horizontal fox-button-group--start">
//     <button class="fox-button fox-button--default fox-button--md">버튼</button>
//     <button class="fox-button fox-button--default fox-button--md">버튼</button>
//   </div>
// 자식 버튼의 크기 클래스를 그룹 크기로 맞추는 건 작성자 몫이다 — React 래퍼는 이걸
// `size` prop으로 자동화한다.
//
// 블록 레벨 `flex`다(`inline-flex`가 아니다). 정렬이 의미를 가지려면 그룹이 부모 폭을
// 채워야 하고, 세로일 때 자식이 폭을 채우려면 stretch할 자리가 있어야 한다.

@use "abstracts" as fox;

.fox-button-group {
  display: flex;
  gap: fox.gap(2);

  &--horizontal {
    flex-direction: row;
    align-items: center;
  }

  // 세로는 자식이 항상 폭을 채운다(시안의 w-full).
  &--vertical {
    flex-direction: column;
    align-items: stretch;
  }

  // 주축 정렬. 세로에서는 그룹 높이가 정해져 있을 때만 눈에 띈다.
  &--start {
    justify-content: flex-start;
  }

  &--center {
    justify-content: center;
  }

  &--end {
    justify-content: flex-end;
  }

  &--wrap {
    flex-wrap: wrap;
  }
}