// FoxTab — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) tab (171:14016 · 섹션 391:4497)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-tab fox-tab--line fox-tab--lg">
//     <div class="fox-tab__list" role="tablist" aria-label="탭">
//       <button class="fox-tab-item fox-tab-item--active" role="tab" aria-selected="true">…</button>
//       <button class="fox-tab-item" role="tab" aria-selected="false" tabindex="-1">…</button>
//     </div>
//   </div>
//
// 크기가 배치를 정한다.
//   - lg: 탭이 폭을 고르게 나눠 갖고, 목록 전체에 옅은 밑줄이 깔린다.
//   - md: 탭이 글자만큼만 차지하고 8px 간격으로 선다. 목록 밑줄은 없다.
// 아래 여백도 크기마다 다르다(시안 spacing/bottom/*).
//
// line 계열에서 고른 탭의 4px 밑줄은 항목이 그리고, 그 아래 1px 선은 목록이 그린다.
// 둘이 겹치는 자리에서 굵은 선이 이겨야 하므로 항목 밑줄을 목록 선 위로 끌어올린다.

@use "abstracts" as fox;

.fox-tab {
  inline-size: 100%;

  &__list {
    display: flex;
    align-items: center;
  }

  // ── 크기 ──────────────────────────────────────────────────────────────────
  &--lg {
    padding-block-end: fox.spacing(bottom-lg);
  }

  // 탭이 폭을 고르게 나눠 갖는다.
  &--lg &__list {
    inline-size: 100%;
  }

  &--lg .fox-tab-item {
    flex: 1 0 0;
    min-inline-size: 0;
  }

  &--md {
    padding-block-end: fox.spacing(bottom-md);
  }

  &--md &__list {
    gap: fox.gap(3);
  }

  &--md .fox-tab-item {
    flex-shrink: 0;
  }

  // ── line 계열 ─────────────────────────────────────────────────────────────
  // lg만 목록 전체에 밑줄이 깔린다(시안).
  &--line#{&}--lg &__list {
    border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
    background: fox.color(surface-neutral-default);
  }

  // 고른 탭의 굵은 밑줄이 목록의 옅은 선을 덮는다.
  &--line#{&}--lg .fox-tab-item {
    margin-block-end: calc(-1 * #{fox.border(1)});
  }

  // ── fill 계열 ─────────────────────────────────────────────────────────────
  // lg는 세그먼트 컨트롤이다 — 목록이 테두리와 둥근 모서리를 갖고 항목이 그 안에 갇힌다.
  // `overflow: clip`이 있어야 끝 칸의 채운 색이 둥근 모서리를 넘지 않는다.
  &--fill#{&}--lg &__list {
    overflow: clip;
    border: fox.border(1) solid fox.color(border-neutral-subtle);
    border-radius: fox.radius(4);
    background: fox.color(surface-neutral-default);
  }
}