// FoxContextualTrigger — 시안: 통합관리자페이지 디자인시스템 Figma contextual-trigger
//
// 툴팁이나 팝오버를 여는 24px짜리 아이콘 단추다. 계열이 아이콘을 정하고(help는 물음표,
// information은 느낌표), 상태는 배경만 바꾼다.
//
// 마크업 계약 (React 밖 소비자용):
//   <button type="button" class="fox-contextual-trigger fox-contextual-trigger--help"
//           aria-label="도움말">
//     <span class="fox-contextual-trigger__icon">…아이콘 svg…</span>
//   </button>
//
// 루트가 `<button>`이라 hover·pressed·포커스·키보드가 전부 네이티브다. 시안의 pressed는
// `:active`가 받는다.
//
// `fox-icon-button`과 다른 조각이다. 저쪽은 폼 컨트롤과 높이를 맞추는 단추라 크기가
// `form(height-*)`을 따르는데(가장 작은 xsm도 32px), 이쪽은 글줄 옆에 붙는 24px 고정이고
// 모서리도 `radius-2`(4px)다.
//
// 배경은 세 상태 모두 `action-secondary` 계열이다 — 기본이 투명이라 아래 배경이 그대로
// 비치고, hover·pressed에서만 연한 판이 깔린다(`fox-tag`와 같은 규칙).
//
// ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브
// `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다(`fox-tag`와 같은 처리).
//
// 토큰이 아닌 값:
//   - box-sizing / display / flex / aspect-ratio / cursor: 구조·상호작용 규칙.

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

.fox-contextual-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: fox.number(10);
  block-size: fox.number(10);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  border-radius: fox.radius(2);
  background: fox.color(action-secondary);
  color: fox.color(icon-neutral-default);
  cursor: pointer;

  &:disabled {
    cursor: default;
  }

  // 아이콘은 판(24px)보다 작은 20px이다 — 판이 아이콘을 감싸는 여백을 갖는다.
  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: fox.icon(4);
    font-size: fox.icon(4);
    block-size: fox.icon(4);
    aspect-ratio: 1 / 1;
  }

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

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

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