// FoxSegmentedControl — 시안: 통합관리자페이지 디자인시스템 Figma segmented-control
//
// 칸들을 테두리 하나로 감싸는 자리다. 시안이 주는 규칙이 배치 두 줄과 크기별 모서리뿐이라
// 이 파일도 그만큼이다 — 칸 안쪽은 `fox-segmented-control-item`이 전부 갖는다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-segmented-control fox-segmented-control--lg" role="radiogroup"
//        aria-label="보기 방식">
//     <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
//     <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
//   </div>
//
// `inline-flex`라 묶음이 내용만큼만 넓다 — 옆에 다른 것을 놓을 수 있다. 줄 전체를 차지해야
// 하면 호출부가 `className`으로 폭을 준다(그것이 `className`을 여는 유일한 이유다).
//
// ⚠️ `overflow: hidden`이 필요하다. 켜진 칸과 비활성 칸은 배경이 채워지는데, 첫 칸·마지막
// 칸에서 그 사각형 배경이 묶음의 둥근 모서리 밖으로 삐져나온다. 칸마다 모서리를 주는 대신
// 묶음에서 한 번 잘라 낸다 — 칸이 몇 개든, 어느 칸이 켜지든 규칙이 하나로 끝난다.
//
// 크기가 바꾸는 것은 모서리뿐이다. 높이·여백·글자는 칸이 갖는다 — 그래서 묶음과 칸의
// `size`가 어긋나면 안 되고, React 쪽에서 묶음이 자식 값을 덮어쓴다.
//
// 토큰이 아닌 값:
//   - box-sizing / display / flex / overflow: 구조 규칙.

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

.fox-segmented-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  // 채워진 칸 배경을 둥근 모서리로 잘라 낸다(파일 상단 ⚠️ 참고).
  overflow: hidden;
  border: fox.border(1) solid fox.color(border-neutral-default);

  &--lg {
    border-radius: fox.form(radius-lg);
  }

  &--md {
    border-radius: fox.form(radius-md);
  }

  &--sm {
    border-radius: fox.form(radius-sm);
  }

  &--xsm {
    border-radius: fox.form(radius-xsm);
  }
}