// FoxLinkButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-lnk (컴포넌트 세트 107:207 · 섹션 391:676)
//
// 마크업 계약 (React 밖 소비자용):
//   <a href="…" class="fox-link-button fox-link-button--primary fox-link-button--md">
//     <span class="fox-link-button__label">링크</span>
//     <span class="fox-link-button__icon">…svg…</span>   <!-- 선택, 항상 라벨 뒤 -->
//   </a>
// href가 없으면 `<button>`으로 써도 되고, 그때는 `:visited`가 켜지지 않는다.
// 앵커의 비활성은 `disabled` 속성이 없으므로 `aria-disabled="true"`로 표시한다.
//
// 크기·계열과 무관하게 상자는 하나뿐이다 — 패딩·간격·모서리가 전부 같다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong의 값이나 Figma가
//     변수로 export하지 않는다.
//   - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙.
//   - text-decoration-* / text-underline-position: 시안이 밑줄을 그렇게 지정한다
//     (from-font). Figma가 변수로 export하지 않을 뿐 임의로 고른 값이 아니다.
//
// 아이콘 크기: lg는 `icon/4`(고정 20px), md·sm은 `form/icon/sm`(PC 16 · 모바일 12)로
// 시안이 서로 다른 그룹에 바인딩해 두었다. 그대로 따른다.

@use "abstracts" as fox;

.fox-link-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: none;
  padding: fox.padding(1);
  border-radius: fox.form(radius-xsm);
  gap: fox.gap(1);
  background: fox.color(button-text-surface);

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

  // 시안이 지정한 밑줄 표기. `from-font`는 폰트가 가진 밑줄 위치·두께를 쓰므로 내림획
  // (g·y·다) 아래로 내려간다 — 기본값 `auto`는 밑줄이 글자를 관통하고 skip-ink가 그
  // 자리를 파내 끊겨 보인다. 아래 규칙들이 `text-decoration` 단축을 쓰지 않는 이유도
  // 같다: 단축은 thickness를 `auto`로 되돌린다.
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;

  &__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 {
    font-size: fox.font-size(label-lg);

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

  &--md {
    font-size: fox.font-size(label-md);

    .fox-link-button__icon {
      inline-size: fox.form(icon-sm);
      font-size: fox.form(icon-sm);
      block-size: fox.form(icon-sm);
    }
  }

  &--sm {
    font-size: fox.font-size(label-sm);

    .fox-link-button__icon {
      inline-size: fox.form(icon-sm);
      font-size: fox.form(icon-sm);
      block-size: fox.form(icon-sm);
    }
  }

  // ── 계열 ──────────────────────────────────────────────────────────────────
  &--primary {
    color: fox.color(font-theme-primary);
  }

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

  // tertiary만 평소에 밑줄이 없고 hover·pressed에서만 생긴다.
  &--tertiary {
    color: fox.color(font-neutral-default);
    text-decoration-line: none;
  }

  &:hover:not([aria-disabled="true"]):not(:disabled) {
    background: fox.color(button-text-surface-hover);
    text-decoration-line: underline;
  }

  &:active:not([aria-disabled="true"]):not(:disabled) {
    background: fox.color(button-text-surface-pressed);
    text-decoration-line: underline;
  }

  // 방문 색은 계열과 무관하게 같다. `:visited`는 앵커에서만, 그리고 색만 적용된다.
  &:visited {
    color: fox.color(button-text-visited);
  }
}

// 시안이 비활성 글자에도 `color/icon/neutral/disabled`를 쓴다(font 쪽이 아니다).
// 계열·`:visited`를 이기려면 특이도가 높아야 해 블록과 함께 지목한다.
.fox-link-button[aria-disabled="true"],
.fox-link-button:disabled {
  cursor: default;
  background: fox.color(button-text-surface);
  color: fox.color(icon-neutral-disabled);
}