/* Kole UI Mobile · Badge 样式 — 对齐移动端规格 §9
   徽标：数字 / 红点 / 短文字三种形态；角标绝对定位，不改变被包裹元素的布局尺寸。
   配色只用令牌（实心底 + 反色文字）：文字与底色对比度亮色 5.57:1 / 暗色 6.19:1。 */

.kole-m-badge {
  --kole-m-badge-size: 18px;      /* 数字角标高度（同时也是圆角半径的两倍） */
  --kole-m-badge-dot-size: 8px;   /* 红点直径 */
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/* 被包裹的内容（图标 / 头像 / 文字） */
.kole-m-badge__wrap {
  display: inline-flex;
  align-items: center;
}

.kole-m-badge__count {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kole-m-badge-size);
  height: var(--kole-m-badge-size);
  padding: 0 var(--kole-space-4);
  border-radius: calc(var(--kole-m-badge-size) / 2);
  background: var(--kole-color-error);
  color: var(--kole-color-text-inverse);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-caption);
  line-height: 1;
  white-space: nowrap;
}

/* 变体 shape=dot：纯红点（无内容，对读屏是装饰） */
.kole-m-badge--dot .kole-m-badge__count {
  width: var(--kole-m-badge-dot-size);
  min-width: var(--kole-m-badge-dot-size);
  height: var(--kole-m-badge-dot-size);
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

/* 变体 shape=text：短文字角标（宽度随文字增长，不做胶囊圆角） */
.kole-m-badge--text .kole-m-badge__count {
  border-radius: var(--kole-radius-small);
  font-size: var(--kole-m-font-size-caption);
}

/* 变体 standalone=true：独立使用，不挂靠在任何内容上 */
.kole-m-badge--standalone .kole-m-badge__count {
  position: static;
  transform: none;
}

/* 状态 hidden：数值为 0 且未开启 showZero 时不渲染（由宿主加类） */
.kole-m-badge.is-hidden {
  display: none;
}