// FoxPagination — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                        Figma pagination (162:374 · 섹션 391:3925)
//                              pagination-item (섹션 391:3817)
//
// 마크업 계약 (React 밖 소비자용):
//   <nav class="fox-pagination" aria-label="페이지">
//     <a class="fox-pagination__item fox-pagination__step">
//       <span class="fox-pagination__step-icon">…svg…</span>이전
//     </a>
//     <ul class="fox-pagination__list">
//       <li><span class="fox-pagination__item fox-pagination__number
//                      fox-pagination__number--current" aria-current="page">1</span></li>
//       <li><a class="fox-pagination__item fox-pagination__number">2</a></li>
//     </ul>
//     <a class="fox-pagination__item fox-pagination__step">
//       다음<span class="fox-pagination__step-icon">…svg…</span>
//     </a>
//   </nav>
//
// 시안의 device 축을 프롭이 아니라 화면 폭으로 나눈다.
//   - 모바일: 이전·다음이 첫 줄, 번호가 둘째 줄. 번호칸만 폭을 다 먹어 줄이 넘어간다.
//   - PC: 이전·번호·다음이 한 줄. `order`로 번호를 가운데로 되돌린다.
// 마크업은 한 벌이고 DOM 순서(이전 → 번호 → 다음)는 읽는 순서 그대로다.
//
// 번호칸끼리는 간격이 없다(시안 list에 gap이 없다) — 칸 자체가 정사각이라 붙어도 벌어져 보인다.
//
// 토큰이 아닌 값:
//   - 번호칸 정사각 크기 3.2rem(PC) / 2.4rem(모바일): 시안 값이나 Figma가 변수로
//     export하지 않는다(사용자 승인).
//   - line-height / letter-spacing: 위와 같다.
//   - 목록의 margin/padding/list-style 0: `<ul>`의 브라우저 기본값 지우기.
//   - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.

@use "abstracts" as fox;

.fox-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: fox.gap(3);
  inline-size: 100%;
  padding-block-start: fox.spacing(top-lg);

  // `<ul>`이라 브라우저 기본 여백·글머리표를 먼저 지운다.
  &__list {
    display: flex;
    order: 1;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: none;
    border-radius: fox.radius(2);
    background: fox.color(action-secondary);
    font-family: fox.font-family(body);
    font-size: fox.font-size(label-md);
    font-weight: fox.font-weight(regular);
    line-height: 1;
    letter-spacing: -0.025em;
    text-decoration: none;
    white-space: nowrap;
  }

  // ── 이전 · 다음 ────────────────────────────────────────────────────────────
  &__step {
    gap: fox.gap(1);
    padding: fox.padding(2);
    color: fox.color(font-neutral-default);
  }

  &__step-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: fox.color(element-neutral-strong);

    > * {
      inline-size: fox.icon(3);
      font-size: fox.icon(3);
      block-size: fox.icon(3);
    }
  }

  // ── 번호 ──────────────────────────────────────────────────────────────────
  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
  &__number {
    box-sizing: border-box;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    color: fox.color(font-neutral-subtle);
  }

  &__number--current {
    background: fox.color(action-secondary-active);
    color: fox.color(font-neutral-static-inverse);
    font-weight: fox.font-weight(bold);
    cursor: default;
  }

  &__ellipsis {
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    color: fox.color(font-neutral-subtle);
  }

  // ── 상태 ──────────────────────────────────────────────────────────────────
  a.fox-pagination__item,
  button.fox-pagination__item {
    cursor: pointer;

    &:hover {
      background: fox.color(action-secondary-hover);
    }

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

  // 갈 곳이 없는 이전·다음. `aria-disabled`가 곧 표시 조건이다.
  &__item[aria-disabled="true"] {
    color: fox.color(font-neutral-disabled);
    cursor: default;

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

  @include fox.pc {
    flex-wrap: nowrap;
    gap: fox.gap(5);

    &__list {
      order: 0;
      inline-size: auto;
    }

    &__number,
    &__ellipsis {
      inline-size: 3.2rem;
      block-size: 3.2rem;
    }
  }
}