// FoxBadge — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                   badge (190:3054 · 섹션 391:4804)
//
// 마크업 계약 (React 밖 소비자용):
//   <span class="fox-badge fox-badge--neutral fox-badge--outline fox-badge--lg">레이블</span>
//
// 색 9종 × 계열 3종(outline·solid·pastel) × 크기 3종이 모두 시안에 있다. 색마다 쓰는 토큰이
// 규칙적이지 않아 아래 표에 모아 두고 한 번에 펼친다 — 손으로 27벌을 적으면 어긋난다.
//   - theme 계열(primary·secondary·accent)은 solid에도 `-strong`을 쓴다(기본값이 없다).
//   - system 계열(danger·warning·success·information)은 테두리가 `-strong`, solid가 기본값이다.
//   - warning만 solid 글자가 검정이다 — 노란 바탕에 흰 글자는 읽히지 않는다.
//   - disabled는 pastel도 solid와 같은 색이다(시안 확인).
//
// 테두리를 `border`가 아니라 안쪽 그림자로 그린다. 시안에서 테두리가 크기를 늘리지 않아
// outline과 solid의 높이가 같은데, CSS `border`는 상자를 키워 1~2px씩 어긋나기 때문이다.
// 굵기는 그대로 `border/1` 토큰을 쓴다.
//
// 토큰이 아닌 값:
//   - 최소 높이 2.4rem(md) · 2rem(sm): 시안 값이나 Figma가 변수로 export하지 않는다
//     (사용자 승인). lg는 여백과 글자만으로 시안 높이가 나와 따로 두지 않는다.
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

@use "sass:map";
@use "abstracts" as fox;

// line = outline 테두리 · text = outline·pastel 글자 · fill = solid 바탕
// on-fill = solid 글자 · soft = pastel 바탕 · soft-text = pastel 글자(다를 때만)
$badge-colors: (
  neutral: (
    line: element-neutral-default,
    text: font-neutral-default,
    fill: element-neutral-default,
    on-fill: font-neutral-static-inverse,
    soft: element-neutral-subtle,
  ),
  primary: (
    line: element-theme-primary-strong,
    text: font-theme-primary,
    fill: element-theme-primary-strong,
    on-fill: font-neutral-static-inverse,
    soft: element-theme-primary-subtler,
  ),
  secondary: (
    line: element-theme-secondary-strong,
    text: font-theme-secondary,
    fill: element-theme-secondary-strong,
    on-fill: font-neutral-static-inverse,
    soft: element-theme-secondary-subtler,
  ),
  accent: (
    line: element-theme-accent-strong,
    text: font-theme-accent,
    fill: element-theme-accent-strong,
    on-fill: font-neutral-static-inverse,
    soft: element-theme-accent-subtler,
  ),
  danger: (
    line: element-system-danger-strong,
    text: font-system-danger,
    fill: element-system-danger,
    on-fill: font-neutral-static-inverse,
    soft: element-system-danger-inverse,
  ),
  warning: (
    line: element-system-warning-strong,
    text: font-system-warning,
    fill: element-system-warning,
    on-fill: font-neutral-static,
    soft: element-system-warning-inverse,
  ),
  success: (
    line: element-system-success-strong,
    text: font-system-success,
    fill: element-system-success,
    on-fill: font-neutral-static-inverse,
    soft: element-system-success-inverse,
  ),
  information: (
    line: element-system-information-strong,
    text: font-system-information,
    fill: element-system-information,
    on-fill: font-neutral-static-inverse,
    soft: element-system-information-inverse,
  ),
  disabled: (
    line: element-neutral-disabled,
    text: font-neutral-disabled,
    fill: element-neutral-disabled,
    on-fill: font-neutral-disabled-strong,
    soft: element-neutral-disabled,
    soft-text: font-neutral-disabled-strong,
  ),
);

.fox-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: fox.radius(2);
  font-family: fox.font-family(body);
  font-weight: fox.font-weight(regular);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;

  // ── 크기 ──────────────────────────────────────────────────────────────────
  &--lg {
    padding: fox.padding(3);
    font-size: fox.font-size(label-md);
  }

  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
  &--md {
    min-block-size: 2.4rem;
    padding-inline: fox.padding(3);
    padding-block: fox.padding(2);
    font-size: fox.font-size(label-sm);
  }

  &--sm {
    min-block-size: 2rem;
    padding: fox.padding(2);
    font-size: fox.font-size(label-xsm);
  }
}

// ── 색 × 계열 ───────────────────────────────────────────────────────────────
@each $name, $tokens in $badge-colors {
  $soft-text: map.get($tokens, text);

  @if map.has-key($tokens, soft-text) {
    $soft-text: map.get($tokens, soft-text);
  }

  .fox-badge--#{$name} {
    &.fox-badge--outline {
      box-shadow: inset 0 0 0 fox.border(1) fox.color(map.get($tokens, line));
      color: fox.color(map.get($tokens, text));
    }

    &.fox-badge--solid {
      background: fox.color(map.get($tokens, fill));
      color: fox.color(map.get($tokens, on-fill));
    }

    &.fox-badge--pastel {
      background: fox.color(map.get($tokens, soft));
      color: fox.color($soft-text);
    }
  }
}