ステータスバッジ（Status Badge）— 業務配色パターン

/* ステータスバッジ パターン集 — style.css
   色を変えたいときは .sb-wrap の --status-* 変数を書き換えるだけでOK */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  color: #1A2332;
}

/* バッジの並びコンテナ。ステータスごとに濃・淡2変数（計10変数）を定義する */
.sb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  --status-progress: #1E40AF;      --status-progress-soft: #DBEAFE;
  --status-done:     #065F46;      --status-done-soft:     #D1FAE5;
  --status-error:    #991B1B;      --status-error-soft:    #FEE2E2;
  --status-warning:  #92400E;      --status-warning-soft:  #FEF3C7;
  --status-hold:     #6B7280;      --status-hold-soft:     #F3F4F6;
}

/* ステータスごとに中間変数（--_main / --_soft）へマッピングする。
   分岐はここに集約し、型別スタイル（.sb-soft 等）には書かない */
.sb-badge[data-status="progress"] { --_main: var(--status-progress); --_soft: var(--status-progress-soft); }
.sb-badge[data-status="done"]     { --_main: var(--status-done);     --_soft: var(--status-done-soft); }
.sb-badge[data-status="error"]    { --_main: var(--status-error);    --_soft: var(--status-error-soft); }
.sb-badge[data-status="warning"]  { --_main: var(--status-warning);  --_soft: var(--status-warning-soft); }
.sb-badge[data-status="hold"]     { --_main: var(--status-hold);     --_soft: var(--status-hold-soft); }

/* 共通形状＋塗りつぶし（既定） */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid transparent;
  background: var(--_main);
  color: #fff;
}

/* ソフト（薄背景＋濃文字） */
.sb-badge.sb-soft {
  background: var(--_soft);
  color: var(--_main);
}

/* アウトライン（白背景＋濃色の枠線） */
.sb-badge.sb-outline {
  background: #fff;
  color: var(--_main);
  border-color: var(--_main);
}

/* 色だけに意味を依存させないためのドット（文字色と同じ色で描画） */
.sb-badge.sb-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ステータス切替セグメントボタン */
.sb-switch {
  display: inline-flex;
  border: 1.5px solid #D0D7E0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sb-switch-btn {
  padding: 8px 16px;
  font-size: 13px;
  background: #fff;
  color: #5A6A7A;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.sb-switch-btn + .sb-switch-btn {
  border-left: 1.5px solid #D0D7E0;
}
.sb-switch-btn.is-active {
  background: #2B7FE8;
  color: #fff;
}

/* スマホ対応 */
@media (max-width: 480px) {
  body { padding: 16px; }
}

// ステータス定義（idがdata-status値・labelが表示文字列）
var STATUSES = [
  { id: 'progress', label: '進行中' },
  { id: 'done',     label: '完了' },
  { id: 'error',    label: 'エラー' },
  { id: 'warning',  label: '警告' },
  { id: 'hold',     label: '保留' }
];

var switchBtns    = document.querySelectorAll('.sb-switch-btn');
var targetBadges  = document.querySelectorAll('.js-sb-target');

// 選択されたステータスに切り替える。
// 色の決定はCSS側の data-status セレクタが行うため、ここでは属性とテキストの書き換えのみ行う
function switchStatus(statusId) {
  var status = STATUSES.filter(function (s) { return s.id === statusId; })[0];
  if (!status) return;

  switchBtns.forEach(function (btn) {
    btn.classList.toggle('is-active', btn.dataset.status === statusId);
  });

  targetBadges.forEach(function (badge) {
    badge.dataset.status = status.id;
    badge.textContent = status.label;
  });
}

switchBtns.forEach(function (btn) {
  btn.addEventListener('click', function () {
    switchStatus(btn.dataset.status);
  });
});