// FoxPopover — 시안: 통합관리자페이지 디자인시스템 Figma popover
//
// 꼬리가 달린 말풍선 판이다. 제목·본문·글자 버튼을 담고 오른쪽 위에 닫기가 붙는다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-popover fox-popover--top fox-popover--arrow-left">
//     <div class="fox-popover__arrow-area">                  <!-- top이면 판 위, bottom이면 아래 -->
//       <span class="fox-popover__arrow"></span>          <!-- 비어 있다. 그림은 CSS가 그린다 -->
//     </div>
//     <div class="fox-popover__content">
//       <div class="fox-popover__body">
//         <div class="fox-popover__title-row">
//           <strong class="fox-popover__title">제목</strong>
//         </div>
//         <div class="fox-popover__message-row">
//           <span class="fox-popover__message">본문</span>
//         </div>
//       </div>
//       <button class="fox-text-button … fox-popover__action">바로가기</button>  <!-- 선택 -->
//       <button class="fox-popover__close" aria-label="닫기">…X svg…</button>
//     </div>
//   </div>
//
// `--top`은 꼬리가 판 **위**에 붙고(트리거 아래에 뜨는 말풍선), `--bottom`은 아래에 붙는다.
// 마크업 순서가 그것을 정한다 — `order`나 `column-reverse`를 쓰지 않는다.
//
// **자리를 스스로 잡지 않는다.** 트리거 옆 어디에 놓을지는 호출부가 `className`으로 준다.
// 자리가 모자랄 때 위아래를 뒤집는 자동 배치도 없다 — 시안이 방향을 값으로 준다.
//
// ⚠️ 띄우는 방식이 `fox-select-option`과 같다. 감싼 요소 기준의 일반 흐름이라
// `overflow: hidden` 조상 안에서는 잘린다. HTML `popover` 속성으로 top layer에 올리는 방법이
// 있지만 위치를 잡아 주는 CSS Anchor Positioning이 아직 크롬 계열에만 있어 미룬다 — 옮기게
// 되면 셀렉트·칩·툴팁까지 한 번에 옮긴다.
//
// 꼬리는 **CSS가 그린다**(SVG를 쓰지 않는다). 그림과 방향·위치 규칙은 `_bubble.scss`의
// `arrow()` 믹스인이 갖는다 — `FoxTooltipRich`와 같은 그림이라 한곳에 둔다. 왜 시안 SVG를
// 쓰지 않는지도 그 파일 상단에 적혀 있다.
//
// 토큰이 아닌 값:
//   - ⚠️ `inline-size: 36rem`(360px): 시안 값 그대로다. 토큰 스케일에 360이 없다. 폭을 바꿔야
//     하는 자리는 호출부가 `className`으로 덮는다(`fox-snackbar`·`fox-alert`와 같은 처리).
//   - box-sizing / display / flex / position: 구조 규칙.
//
// 꼬리의 가로 위치는 **루트의 `align-items`**가 정한다(시안 지정). 꼬리 영역이 좌우 24px
// 여백을 달고 다니므로, 왼쪽·오른쪽에서는 그만큼 안쪽에 서고 가운데에서는 여백이 대칭이라
// 정확히 가운데에 선다.

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

.fox-popover {
  @include bubble.root;

  // 시안의 neutral/lv2 — 가까운 그림자와 먼 그림자 두 겹이다.
  //
  // ⚠️ `box-shadow`가 아니라 `drop-shadow`다. box-shadow는 요소의 **사각형 박스**를 따라
  // 그려지므로, 꼬리 옆 빈 자리까지 포함한 네모 그림자가 나온다(시안은 Figma 프레임이 곧
  // 모양이라 그 차이가 없다). drop-shadow는 **실제로 칠해진 모양**을 따라가므로 판과 꼬리가
  // 하나의 말풍선으로 그림자를 진다.
  //
  // 겹쳐 쓰면 뒤의 그림자가 앞 그림자까지 다시 흐리게 하지만, 두 겹 다 10% 알파라 눈에
  // 띄는 차이는 없다.
  filter:
    drop-shadow(
        #{fox.shadow(location1)} #{fox.shadow(location1)} #{fox.shadow(blur2)}
          #{fox.primitive(alpha-black10)}
      )
      drop-shadow(
        #{fox.shadow(location3)} #{fox.shadow(location3)} #{fox.shadow(blur3)}
          #{fox.primitive(alpha-black10)}
      );


  // ── 판 ──────────────────────────────────────────────────────────────────────
  &__content {
    // 닫기 버튼의 위치 기준이다.
    position: relative;
    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-strong);
    border-radius: fox.radius(5);
    background: fox.color(surface-neutral-default);
  }

  // ── 꼬리 ────────────────────────────────────────────────────────────────────
  // 좌우 여백이 꼬리를 판 가장자리에서 띄운다. **늘리지 않는다** — 폭이 내용(22px + 여백
  // 48px)만큼이라야 루트의 `align-items`가 이 덩어리를 왼쪽·가운데·오른쪽으로 옮길 수 있다.
  //
  // 판보다 **위에 칠해진다**(시안 구조). 꼬리가 판 쪽으로 1px 파고들고, 꼬리 안의 흰 띠가 그
  // 자리의 판 테두리를 지워 말풍선 안팎이 하나로 이어진다. 쌓임 순서를 올리지 않으면
  // `--top`에서 판이 나중에 칠해져 그 선이 되살아난다.
  &__arrow-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: fox.padding(8);
  }

  // ── 글자 ────────────────────────────────────────────────────────────────────
  &__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(6);
  }

  &__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;
  }

  // 글자 버튼은 자기 모양을 그대로 갖는다 — 여기서는 줄어들지만 않게 막는다.
  &__action {
    flex-shrink: 0;
  }

  // ── 닫기 ────────────────────────────────────────────────────────────────────
  // 판 오른쪽 위 모서리에 붙는다. 누르는 자리는 40px 정사각이고 아이콘은 16px이다.
  //
  // ⚠️ 시안이 `align-items: flex-end`를 준다 — 가로는 시작(왼쪽), 세로는 끝(아래)이라
  // 아이콘이 40px 칸의 왼쪽 아래로 치우친다(`fox-snackbar`의 닫기와 같다).
  &__close {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    inline-size: fox.number(14);
    block-size: fox.number(14);
    aspect-ratio: 1 / 1;
    padding: fox.padding(2);
    border: none;
    background: none;
    color: fox.color(icon-neutral-default);
    cursor: pointer;
  }

  &__close > * {
    flex-shrink: 0;
    inline-size: fox.icon(3);
    block-size: fox.icon(3);
    aspect-ratio: 1 / 1;
  }
}

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