// FoxTag — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma tag (132:195)
//
// 알약 모양의 작은 조각이다 — 글자 하나와 아이콘 하나로 끝난다.
//
// 마크업 계약 (React 밖 소비자용):
//   <button type="button" class="fox-tag fox-tag--lg fox-tag--sorting">
//     <span class="fox-tag__label">서울</span>
//     <span class="fox-tag__icon">…닫기 svg…</span>
//   </button>
//   <button type="button" class="fox-tag fox-tag--lg fox-tag--button">
//     <span class="fox-tag__icon">…택 svg…</span>
//     <span class="fox-tag__label">서울</span>
//   </button>
//
// 아이콘이 앞이냐 뒤냐는 **마크업 순서가 정한다** — 계열별로 `order`나 `row-reverse`를 쓰지
// 않는다. sorting은 글자 뒤에 닫기 아이콘, button은 글자 앞에 택 아이콘이다. 두 계열이 쓰는
// 클래스가 `fox-tag__icon` 하나라 크기·색 규칙도 한 벌로 끝난다(`fox-button`과 같은 방식).
//
// 루트가 `<button>`이라 hover·pressed·포커스·키보드가 전부 네이티브다. 시안의 pressed는
// `:active`로 받는다.
//
// 배경은 세 상태 모두 계열과 무관하게 같다. button 계열만 hover·pressed에서 **글자에 밑줄이
// 추가로** 붙는다 — 시안이 배경 규칙을 계열 위에 두고 밑줄만 button에 얹는다.
//
// 아이콘 색은 시안의 `black / 25%`를 그대로 값으로 박지 않고 `icon-neutral-fill`을 쓴다 —
// 라이트에서 `alpha-black25`, 다크에서 `alpha-white25`로 뒤집히는 같은 값의 토큰이다.
// SVG는 `fill="currentColor"`로 그려야 이 색이 먹는다.
//
// 아이콘 크기는 세 크기가 모두 `icon-3`(16px)이다 — 시안 확인 완료. 크기 수식어가 바꾸는 것은
// padding·gap·글자 크기뿐이고 아이콘은 건드리지 않으므로, 아이콘 규칙을 블록에 한 번만 둔다.
//
// ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브
// `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일 label/*의 값이나 Figma가 변수로
//     export하지 않는다. 세 크기가 모두 `-0.025em`이라 규칙 하나로 끝난다(15px→-0.375px,
//     13px→-0.325px, 11px→-0.275px). px이 아니라 em인 이유는 글자 크기가 크기 수식어마다,
//     그리고 브레이크포인트마다 달라지기 때문이다 — px으로 박으면 그 자리에서 비율이 어긋난다.
//   - box-sizing / display / flex / cursor / white-space / aspect-ratio: 구조·상호작용 규칙.

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

.fox-tag {
  // 안쪽 여백이 바깥 크기를 늘리지 않게 한다 — 좁은 자리에서 알약 높이가 흔들리지 않는다.
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: fox.radius(max);
  background: fox.color(action-secondary);
  cursor: pointer;

  color: fox.color(font-neutral-default);
  font-family: fox.font-family(body);
  font-weight: fox.font-weight(regular);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;

  &:disabled {
    cursor: default;
  }

  // 글자만 줄어들게 해 아이콘이 밀리지 않게 한다.
  &__label {
    min-inline-size: 0;
  }

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: fox.icon(3);
    font-size: fox.icon(3);
    block-size: fox.icon(3);
    // 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다.
    aspect-ratio: 1 / 1;
    color: fox.color(icon-neutral-fill);
  }

  // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
  &__icon > * {
    inline-size: 100%;
    block-size: 100%;
  }

  // ── 크기 ────────────────────────────────────────────────────────────────────
  // 크기 이름과 글자 토큰 이름이 한 칸씩 어긋난다(lg→label-md). 시안이 그렇게 준다.
  &--lg {
    padding: fox.padding(3) fox.padding(5);
    gap: fox.gap(2);
    font-size: fox.font-size(label-md);
  }

  &--md {
    padding: fox.padding(2) fox.padding(3);
    gap: fox.gap(2);
    font-size: fox.font-size(label-sm);
  }

  // sm만 gap이 한 단계 좁다.
  &--sm {
    padding: fox.padding(1) fox.padding(3);
    gap: fox.gap(1);
    font-size: fox.font-size(label-xsm);
  }

  // ── 상태 ────────────────────────────────────────────────────────────────────
  // 계열과 무관하게 배경만 바뀐다.
  &:hover:not(:disabled) {
    background: fox.color(action-secondary-hover);
  }

  &:active:not(:disabled) {
    background: fox.color(action-secondary-pressed);
  }

  // button 계열은 위 배경 변화에 밑줄이 더해진다. sorting은 배경 변화로 끝난다.
  //
  // `text-decoration` 단축을 쓰지 않는다 — 단축은 thickness를 `auto`로 되돌린다. 시안의
  // skip-ink·thickness·underline-offset은 값이 전부 `auto`, 즉 기본값이라 적지 않는다.
  // 기본값과 다른 것은 `from-font` 하나뿐이다 — 폰트가 가진 밑줄 위치를 쓰므로 내림획
  // (g·y·다) 아래로 내려간다.
  &--button:hover:not(:disabled) &__label,
  &--button:active:not(:disabled) &__label {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
  }
}