// FoxTabItem — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) tab-item (171:13927 · 섹션 391:4431)
//
// 마크업 계약: `_fox-tab.scss` 상단 참고.
//
// 계열과 크기는 묶음이 정한다 — 항목에 수식어를 붙이지 않고 `.fox-tab--line`처럼 묶음
// 클래스에서 내려온다. 항목이 홀로 쓰이는 자리가 없어 그게 더 단순하다.
//
// 상태는 다섯이다. 기본·hover·pressed는 바탕만 바뀌고, 고름(active)은 계열마다 다르며,
// 잠김은 글자만 흐려진다.
//   - line 고름: 흰 바탕 + 4px 밑줄 + 파란 글자
//   - fill 고름: 남색 바탕 + 흰 글자
//
// line 계열의 기본 상태도 밑줄 자리를 1px 비워 둔다 — 고름으로 바뀔 때 글자가 밀리지
// 않게 하려면 자리를 미리 잡아야 한다(시안도 투명 1px을 둔다).
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - appearance / cursor: 구조·상호작용 규칙.

@use "abstracts" as fox;

.fox-tab-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  background: fox.color(action-secondary);
  color: fox.color(font-neutral-default);
  font-family: fox.font-family(title);
  font-weight: fox.font-weight(bold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  // 고른 탭은 이미 제 모양이 있어 hover·pressed를 걸지 않는다.
  &:hover:not(:disabled):not([aria-disabled="true"]):not(&--active) {
    background: fox.color(action-secondary-hover);
  }

  &:active:not(:disabled):not([aria-disabled="true"]):not(&--active) {
    background: fox.color(action-secondary-pressed);
  }

  &:disabled,
  &[aria-disabled="true"] {
    color: fox.color(font-neutral-disabled);
    cursor: default;
  }
}

// ── 크기 (묶음이 정한다) ────────────────────────────────────────────────────
.fox-tab--lg .fox-tab-item {
  padding-inline: fox.padding(8);
  padding-block: fox.padding(6);
  font-size: fox.font-size(heading-md);
  letter-spacing: -0.025em;
}

.fox-tab--md .fox-tab-item {
  padding-inline: fox.padding(5);
  padding-block: fox.padding(3);
  font-size: fox.font-size(heading-sm);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

// ── line 계열 ───────────────────────────────────────────────────────────────
// 고름으로 바뀔 때 글자가 밀리지 않게 밑줄 자리를 미리 잡는다.
.fox-tab--line .fox-tab-item {
  border-block-end: fox.border(1) solid fox.color(action-secondary);
}

.fox-tab--line .fox-tab-item--active {
  border-block-end: fox.border(3) solid fox.color(action-secondary-active);
  background: fox.color(surface-neutral-default);
  color: fox.color(font-theme-secondary);
}

// ── fill 계열 ───────────────────────────────────────────────────────────────
.fox-tab--fill .fox-tab-item--active {
  background: fox.color(surface-theme-secondary-inverse);
  color: fox.color(font-neutral-strong-inverse);
}

// md는 항목 하나하나가 알약이다(시안).
.fox-tab--fill.fox-tab--md .fox-tab-item {
  border-radius: fox.radius(4);
}

// lg는 세그먼트 컨트롤이라 모서리를 목록이 갖는다. 칸 사이 구분선은 고르지 않은 칸이
// 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가 이미 보이므로 선을 두지 않는다
// (시안 그대로).
.fox-tab--fill.fox-tab--lg .fox-tab-item:not(.fox-tab-item--active) {
  border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
}