// FoxTextButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-txt (컴포넌트 세트 106:2468 · 섹션 390:569)
//
// 마크업 계약 (React 밖 소비자용):
//   <button class="fox-text-button fox-text-button--primary fox-text-button--md">
//     <span class="fox-text-button__icon">…svg…</span>   <!-- 선택 -->
//     <span class="fox-text-button__label">버튼</span>
//     <span class="fox-text-button__icon">…svg…</span>   <!-- 선택 -->
//   </button>
// 비활성은 네이티브 `disabled`. 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용된다.
//
// 높이를 고정하지 않는다 — 시안이 패딩과 line-height로만 크기를 잡는다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong·em의 값이나 Figma가
//     변수로 export하지 않는다.
//   - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙.
//
// 아이콘 크기는 컴포넌트 세트가 변수를 걸지 않아 리터럴(20/16/16/12px)로 나온다. 값이
// 정확히 일치하는 `icon-*`(모드 무관)에 매핑했다 — 전시 섹션(390:569)의 인스턴스가
// icon/4·3·2를 쓰고 있어 의도도 같다. `form-icon-*`은 PC에서 24/20/16/12라 어긋난다.

@use "abstracts" as fox;

.fox-text-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: fox.color(button-text-surface);

  font-family: fox.font-family(body);
  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;
  }

  &__icon > * {
    inline-size: 100%;
    block-size: 100%;
  }

  // ── 크기 ──────────────────────────────────────────────────────────────────
  // lg만 상하 패딩과 간격이 한 단계 넓다. 나머지는 네 방향이 같은 값이다.
  &--lg {
    padding-block: fox.padding(3);
    padding-inline: fox.padding(2);
    border-radius: fox.form(radius-sm);
    gap: fox.gap(2);
    font-size: fox.font-size(label-lg);

    .fox-text-button__icon {
      inline-size: fox.icon(4);
      font-size: fox.icon(4);
      block-size: fox.icon(4);
    }
  }

  &--md {
    padding: fox.padding(2);
    border-radius: fox.form(radius-sm);
    gap: fox.gap(1);
    font-size: fox.font-size(label-md);

    .fox-text-button__icon {
      inline-size: fox.icon(3);
      font-size: fox.icon(3);
      block-size: fox.icon(3);
    }
  }

  &--sm {
    padding: fox.padding(2);
    border-radius: fox.form(radius-sm);
    gap: fox.gap(1);
    font-size: fox.font-size(label-sm);

    .fox-text-button__icon {
      inline-size: fox.icon(3);
      font-size: fox.icon(3);
      block-size: fox.icon(3);
    }
  }

  &--xsm {
    padding: fox.padding(2);
    border-radius: fox.form(radius-sm);
    gap: fox.gap(1);
    font-size: fox.font-size(label-xsm);

    .fox-text-button__icon {
      inline-size: fox.icon(2);
      font-size: fox.icon(2);
      block-size: fox.icon(2);
    }
  }

  // ── 계열 ──────────────────────────────────────────────────────────────────
  // 계열은 색과 굵기만 바꾼다. 배경은 상태에 따라서만 달라진다.
  &--primary {
    font-weight: fox.font-weight(bold);
    color: fox.color(font-theme-primary);

    .fox-text-button__icon {
      color: fox.color(icon-theme-primary-strong);
    }
  }

  &--secondary {
    font-weight: fox.font-weight(medium);
    color: fox.color(font-neutral-default);

    .fox-text-button__icon {
      color: fox.color(icon-neutral-default);
    }
  }

  &:hover:not(:disabled) {
    background: fox.color(button-text-surface-hover);
  }

  &:active:not(:disabled) {
    background: fox.color(button-text-surface-pressed);
  }
}

// 계열과 무관하게 같다. 굵기는 계열 값을 유지한다(시안에서 disabled도 계열별로 다르다).
.fox-text-button:disabled {
  background: fox.color(button-text-surface);
  color: fox.color(font-neutral-disabled);

  .fox-text-button__icon {
    color: fox.color(icon-neutral-disabled);
  }
}