// FoxBreadcrumb — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                        Figma breadcrumb (141:3204 · 섹션 392:5794)
//
// 마크업 계약 (React 밖 소비자용):
//   <nav class="fox-breadcrumb" aria-label="현재 위치">
//     <ol class="fox-breadcrumb__list">
//       <li class="fox-breadcrumb__crumb">
//         <a class="fox-breadcrumb__item"><span class="fox-breadcrumb__icon">…svg…</span>홈</a>
//       </li>
//       <li class="fox-breadcrumb__crumb">
//         <span class="fox-breadcrumb__separator">…svg…</span>
//         <span class="fox-breadcrumb__item" aria-current="page">1Depth</span>
//       </li>
//     </ol>
//   </nav>
//
// 시안에 상태 변형이 없다. 누를 수 있는 항목만 hover·pressed를 주는데, 항목 바탕이
// `action/primary`(투명)라 같은 계열의 hover·pressed 토큰을 그대로 쓴다.
//
// 아이콘 크기 16(집)·12(구분자)는 시안 값이다. 아이콘 자체는 `@fox/core/icons`가 갖는다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
//   - 목록의 margin/padding/list-style 0: `<ol>`의 브라우저 기본값 지우기.
//   - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.

@use "abstracts" as fox;

.fox-breadcrumb {
  display: flex;
  inline-size: 100%;

  // `<ol>`이라 브라우저 기본 여백·번호를 먼저 지운다.
  &__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: fox.gap(2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  // 구분자와 항목이 한 덩어리로 붙어 다녀야 줄바꿈이 어긋나지 않는다.
  &__crumb {
    display: flex;
    align-items: center;
    gap: fox.gap(2);
  }

  &__separator {
    display: inline-flex;
    flex-shrink: 0;
    color: fox.color(icon-neutral-subtle);

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

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

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: fox.color(icon-neutral-default);

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

  // 현재 위치는 누를 곳이 없다.
  &__item[aria-current="page"] {
    cursor: default;
  }

  a.fox-breadcrumb__item,
  button.fox-breadcrumb__item {
    cursor: pointer;

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

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