// FoxBadgeDot — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                      badge-dot (190:3359 · 섹션 392:4816)
//                      badge-number (190:3354 · 섹션 392:4810)
//
// 마크업 계약 (React 밖 소비자용):
//   <span class="fox-badge-dot fox-badge-dot--primary"></span>
//   <span class="fox-badge-dot fox-badge-dot--primary fox-badge-dot--counted"><span>5</span></span>
//
// 두 시안이 한 컴포넌트다 — 둘 다 알림 표시이고 색 축(primary·new)이 같으며, 개수를
// 아느냐 모르느냐만 다르다. 개수가 붙으면 점이 알약으로 늘어난다.
//
// 토큰이 아닌 값:
//   - 점 0.6rem, 숫자 배지 높이·최소폭 2rem: 시안 값이나 Figma가 변수로 export하지
//     않는다(사용자 승인).
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

@use "abstracts" as fox;

.fox-badge-dot {
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: fox.radius(max);

  // 개수가 붙으면 알약이 되고 글자만큼 옆으로 늘어난다.
  &--counted {
    inline-size: auto;
    min-inline-size: 2rem;
    block-size: 2rem;
    padding-inline: fox.padding(2);
    color: fox.color(font-neutral-static-inverse);
    font-family: fox.font-family(body);
    font-size: fox.font-size(label-sm);
    font-weight: fox.font-weight(bold);
    line-height: 1;
    letter-spacing: -0.025em;
    text-align: center;
  }

  &--primary {
    background: fox.color(element-theme-primary);
  }

  &--new {
    background: fox.color(element-theme-accent);
  }
}