/* Kole UI Mobile · Avatar 样式 — 对齐移动端规格 §23
   头像：三档尺寸 × 两种形状 × 文字 / 图片两种类型；
   文字头像用品牌底 + 反色字（亮色 5.85:1 / 暗色 5.87:1），图片失败退回文字（is-fallback）。 */

.kole-m-avatar {
  --kole-m-avatar-size: 40px;         /* 三档尺寸：small 32 / default 40 / large 56 */
  --kole-m-avatar-radius: 50%;        /* 形状：circle 50% / square 圆角方形 */
  --kole-m-avatar-font-size: 14px;    /* 文字随尺寸放大，保证小尺寸下仍可读 */
  --kole-m-avatar-badge-size: 10px;   /* 右下角角标位直径 */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--kole-m-avatar-size);
  height: var(--kole-m-avatar-size);
  overflow: hidden;
  border-radius: var(--kole-m-avatar-radius);
  background: var(--kole-color-brand);
  color: var(--kole-color-text-inverse);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-avatar-font-size);
  line-height: 1;
  user-select: none;
}

/* 变体 size：三档（small 32 / default 40 / large 56） */
.kole-m-avatar--small {
  --kole-m-avatar-size: 32px;
  --kole-m-avatar-font-size: 12px;
  --kole-m-avatar-badge-size: 8px;
}

.kole-m-avatar--large {
  --kole-m-avatar-size: 56px;
  --kole-m-avatar-font-size: 18px;
  --kole-m-avatar-badge-size: 12px;
}

/* 变体 shape：circle 用于人，square 用于企业 / 群组 */
.kole-m-avatar--circle { --kole-m-avatar-radius: 50%; }
.kole-m-avatar--square { --kole-m-avatar-radius: var(--kole-radius-medium); }

/* 变体 type=image：图片铺满容器并按形状裁切 */
.kole-m-avatar__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 变体 type=text：一到两个字符居中 */
.kole-m-avatar__text {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 状态 fallback：图片不可用时退回文字，底色转为中性底 */
.kole-m-avatar.is-fallback {
  background: var(--kole-color-table-header-bg);
  color: var(--kole-color-text-secondary);
}

/* 状态 disabled：置灰（如成员已离职） */
.kole-m-avatar.is-disabled {
  background: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}

/* 角标位：挂在线状态或未读数，内容由宿主插槽提供 */
.kole-m-avatar__badge {
  position: absolute;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-avatar-badge-size);
  height: var(--kole-m-avatar-badge-size);
  border: 2px solid var(--kole-color-card-bg);
  border-radius: 50%;
  background: var(--kole-color-success);
}

/* 头像本身是内容不是控件；宿主把它包进 button / a 时才需要键盘焦点环 */
.kole-m-avatar:focus-visible {
  outline: 2px solid var(--kole-color-focus-ring);
  outline-offset: 2px;
}