// FoxTooltipRich — 시안: 통합관리자페이지 디자인시스템 Figma tooltip-rich
//
// 제목과 본문을 담은 말풍선이다. `fox-popover`와 판·꼬리의 구조가 같고 **누를 것이 없다** —
// 닫기도 액션 버튼도 없다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-tooltip-rich fox-tooltip-rich--top fox-tooltip-rich--arrow-left">
//     <div class="fox-tooltip-rich__arrow-area">        <!-- top이면 판 위, bottom이면 아래 -->
//       <span class="fox-tooltip-rich__arrow"></span>   <!-- 비어 있다. 그림은 CSS가 그린다 -->
//     </div>
//     <div class="fox-tooltip-rich__content">
//       <div class="fox-tooltip-rich__body">
//         <div class="fox-tooltip-rich__title-row">
//           <strong class="fox-tooltip-rich__title">제목</strong>
//         </div>
//         <div class="fox-tooltip-rich__message-row">
//           <span class="fox-tooltip-rich__message">본문</span>
//         </div>
//       </div>
//     </div>
//   </div>
//
// `--top`은 꼬리가 판 **위**에 붙고(트리거 아래에 뜨는 말풍선), `--bottom`은 아래에 붙는다.
// 마크업 순서가 그것을 정한다 — `order`나 `column-reverse`를 쓰지 않는다.
//
// 꼬리는 **CSS가 그린다**(SVG를 쓰지 않는다). 그림과 방향·위치 규칙은 `_bubble.scss`의
// `arrow()` 믹스인이 갖는다 — `fox-popover`와 같은 그림이라 한곳에 둔다. 왜 시안 SVG를
// 쓰지 않는지도 그 파일 상단에 적혀 있다.
//
// `fox-popover`와 다른 점은 셋뿐이다:
//   1. 테두리가 한 단계 옅다(`border-neutral-default` ↔ 팝오버의 `border-neutral-strong`).
//      꼬리도 같은 값을 받는다.
//   2. 제목과 본문 사이가 좁다(`padding-3` 8px ↔ 팝오버의 `padding-6` 16px).
//   3. 그림자가 없다 — 시안이 주지 않는다.
//
// 제목 줄의 오른쪽 여백(`padding-9`)은 팝오버와 같다. 닫기 버튼이 없어 비워 둘 이유가
// 없어 보이지만 시안이 같은 값을 주므로 그대로 둔다 — 두 말풍선의 글줄 시작·끝이 맞는다.
//
// 토큰이 아닌 값:
//   - ⚠️ `inline-size: 36rem`(360px): 시안 값 그대로다. 토큰 스케일에 360이 없다. 폭을 바꿔야
//     하는 자리는 호출부가 `className`으로 덮는다(`fox-popover`와 같은 처리).
//   - line-height / letter-spacing: 시안 텍스트 스타일 heading/xsm·body/sm의 값이나 Figma가
//     변수로 export하지 않는다. -0.375px·-0.325px은 각각 15px·13px 기준이라 `-0.025em`으로
//     적는다(다른 컴포넌트와 같은 근거).
//   - box-sizing / display / flex: 구조 규칙.

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

.fox-tooltip-rich {
  @include bubble.root;

  // ── 판 ──────────────────────────────────────────────────────────────────────
  &__content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(4);
    align-self: stretch;
    padding: fox.padding(8);
    border: fox.border(1) solid fox.color(border-neutral-default);
    border-radius: fox.radius(5);
    background: fox.color(surface-neutral-default);
  }

  // ── 글자 ────────────────────────────────────────────────────────────────────
  &__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  &__title-row {
    display: flex;
    align-items: center;
    gap: fox.gap(5);
    align-self: stretch;
    padding-inline-end: fox.padding(9);
  }

  &__title {
    flex: 1 0 0;
    min-inline-size: 0;
    color: fox.color(font-neutral-strong);
    font-family: fox.font-family(title);
    font-size: fox.font-size(heading-xsm);
    font-weight: fox.font-weight(bold);
    line-height: 1.4;
    letter-spacing: -0.025em;
  }

  // 제목과 본문 사이 간격을 본문의 윗여백이 맡는다(시안이 그렇게 준다) — 제목만 있을 때
  // 아래로 빈자리가 남지 않는다.
  &__message-row {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    padding-block-start: fox.padding(3);
  }

  &__message {
    flex: 1 0 0;
    min-inline-size: 0;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-sm);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }
}

// 꼬리. 판과 같은 색을 넘긴다 — 꼬리는 판이 뾰족하게 튀어나온 부분이다.
@include bubble.arrow(
  "fox-tooltip-rich",
  $border: fox.color(border-neutral-default),
  $fill: fox.color(surface-neutral-default)
);