// FoxChipArea — 시안: 통합관리자페이지 디자인시스템 Figma chip-area
//
// 칩 여러 개를 나란히 놓는 자리다. 시안이 주는 규칙이 세 줄뿐이라 이 파일도 세 줄로 끝난다 —
// 칩 사이 간격 말고는 아무것도 정하지 않는다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-chip-area" role="group" aria-label="거래 구분">
//     <button type="button" class="fox-chip fox-chip--md fox-chip--action">…</button>
//     <button type="button" class="fox-chip fox-chip--md fox-chip--action">…</button>
//   </div>
//
// `inline-flex`라 묶음이 내용만큼만 넓다 — 옆에 다른 것을 놓을 수 있다. 줄 전체를 차지해야
// 하면 호출부가 `className`으로 폭을 준다(그것이 `className`을 여는 유일한 이유다).
//
// `align-items: center`가 필요한 이유는 칩의 크기(높이)가 섞일 수 있어서다. `FoxChipArea`의
// `size`로 통일하면 섞이지 않지만, 통일하지 않고 쓰는 것도 막지 않는다.
//
// 기본은 한 줄이다 — 폭이 모자라면 칩이 눌리는 게 아니라 넘친다. 여러 줄로 흘러야 하는 자리는
// `--wrap`을 건다(시안 ADM_ADM_102_p의 "메뉴 선택"이 칩을 두 줄로 감는다).

@use "@fox/styles/abstracts" as fox;

.fox-chip-area {
  display: inline-flex;
  align-items: center;
  gap: fox.gap(2);

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