// FoxStatusIndicator — 시안: 통합관리자페이지 디자인시스템 Figma status-indicator
//
// 작은 점 하나와 글자로 상태를 알린다. 크기 수식어가 없다 — 시안에 하나뿐이다.
//
// 마크업 계약 (React 밖 소비자용):
//   <span class="fox-status-indicator fox-status-indicator--success">
//     <span class="fox-status-indicator__dot"></span>
//     <span class="fox-status-indicator__label">완료</span>
//   </span>
//
// 점은 비어 있는 요소다 — 배경색만으로 그린다. 뜻은 글자가 담고 점은 장식이라
// 마크업에서 `aria-hidden`이 붙는다.
//
// 계열은 **점의 배경과 글자색을 각각 다른 토큰으로** 바꾼다. 점은 `element-*`(칠하는 면),
// 글자는 `font-*`(읽는 글자)다 — 같은 계열이라도 명도가 달라 시안이 둘을 나눠 준다.
// 기본은 점이 `element-neutral-default`(회색 면), 글자가 `font-neutral-default`다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일 label/md의 값이나 Figma가 변수로
//     export하지 않는다. 시안의 -0.375px은 15px 기준이라 `-0.025em`으로 적는다
//     (다른 컴포넌트와 같은 근거). line-height는 시안이 100%라 `1`이다 — 점과 글자가 한 줄에
//     서는 조각이라 줄 간격을 두지 않는다.
//   - display / align-items / aspect-ratio / flex-shrink: 구조 규칙.

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

.fox-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: fox.gap(2);

  color: fox.color(font-neutral-default);
  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;

  // 6px 정원. 글자가 길어 줄이 좁아져도 찌그러지지 않게 크기를 못박는다.
  &__dot {
    flex-shrink: 0;
    inline-size: fox.number(4);
    block-size: fox.number(4);
    aspect-ratio: 1 / 1;
    border-radius: fox.radius(max);
    background: fox.color(element-neutral-default);
  }

  // ── 계열 ────────────────────────────────────────────────────────────────────
  // 글자색은 블록에서 상속되므로 루트에 주고, 점은 자기 배경을 따로 받는다.
  //
  // `default`는 블록 규칙이 곧 그 계열의 모양이라 따로 덮을 것이 없다.
  &--default {
    // 시안 그대로 — 블록에 있는 값이 전부다.
  }

  &--information {
    color: fox.color(font-system-information);
  }

  &--information &__dot {
    background: fox.color(element-system-information-strong);
  }

  &--success {
    color: fox.color(font-system-success);
  }

  &--success &__dot {
    background: fox.color(element-system-success-strong);
  }

  &--warning {
    color: fox.color(font-system-warning);
  }

  &--warning &__dot {
    background: fox.color(element-system-warning-strong);
  }

  &--danger {
    color: fox.color(font-system-danger);
  }

  &--danger &__dot {
    background: fox.color(element-system-danger-strong);
  }
}