/* Mention atom 样式
 *
 * 两种形态：
 *   1. 默认态（内置 @name 文本）—— 视觉由 SDK 负责：左右 2px 留白、
 *      品牌蓝文字、hover 与选中态底色。
 *   2. 自定义内容态（.sc-mention-atom--custom）—— 接入方通过
 *      ContentComponent / renderMention / MentionTag.render 提供内容
 *      （如「头像 + 名称」胶囊），外壳退化为中性容器：不留白、不上底色、
 *      不改文字色、不按 baseline 抢垂直对齐。
 *      否则外壳的 padding / 背景 / baseline 会和内容自己的胶囊底、
 *      头像尺寸打架（表现为胶囊左右多 2px、双层背景、头像被拉偏）。
 */
.sc-mention-atom {
  display: inline;
  cursor: default;
  white-space: nowrap;
  /* ── 形态 1：默认 @name 文本 ── */
  /* ── 形态 2：自定义内容，外壳只做容器 ──
     垂直对齐走 baseline：inline-flex 的基线取自内部第一个 flex item，
     而内容组件（如「头像 + 名称」胶囊）必须自己提供「文本基线」，
     才能让胶囊里的文字与所在行的文字对齐。这里若改 middle 会被外层
     inline wrapper 的基线重新劫持，胶囊会退化成「底边贴基线」而下沉。 */
}
.sc-mention-atom:not(.sc-mention-atom--custom) {
  padding: 0 2px;
  border-radius: var(--sc-ui-radius-sm);
  color: var(--sc-ui-primary);
}
.sc-mention-atom:not(.sc-mention-atom--custom).sc-mention-atom--selected {
  background: var(--sc-ui-active);
}
@media (hover: hover) {
  .sc-mention-atom:not(.sc-mention-atom--custom):hover {
    background: var(--sc-ui-active);
  }
}
.sc-mention-atom--custom {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
}