/* 双箭头交换指示器 —— 组件 components/public/SwapArrow.tsx
 *
 * ⚠️ 这份是新抽的收口点。既有的三处副本（team.css 的 .t4-chip-action-*、home.css 的
 * .ft-card-open-*、me-inbox-feed.css 的 .me-feed-arrow-*）**刻意没动** —— 它们和各自
 * 页面的样式咬合，统一会改到三个页面的既有观感。新代码用这里的 .sw-*。
 *
 * 值照 .claude/skills/bonjour-ui/SKILL.md 抄，不要去那三份副本里 grep（team.css 那份的
 * 蓝还是全站统一之前的 #007cff）。
 */

.sw-arrow {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #f5f5f7; /* design-ok: 图标底衬（非分组底色），全站图标圆底同一档 */
  transition: background-color 0.2s ease;
}

.sw-arrow-img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  /* SVG 是黑色源图，用 filter 染成次级墨色 #86868b。 */
  filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(284%) hue-rotate(202deg)
    brightness(91%) contrast(89%);
  /* design-ok: 图标交换是两段接力（出 + 入），单段 300ms 才读得出「换了一个箭头」 */
  transition:
    opacity 0.3s cubic-bezier(0.1, 0, 0, 1),
    transform 0.3s cubic-bezier(0.1, 0, 0, 1),
    filter 0.2s ease;
}

/* 第一段：静息 —— ↗ 在位，→ 在左侧画外等着。 */
.sw-arrow-img--outgoing {
  width: 12px;
  height: 12px;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.sw-arrow-img--incoming {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translate(calc(-50% - 18px), -50%);
}

/* 第二段：hover —— ↗ 右上飞出，→ 延迟 150ms 从左滑入。
 *
 * ⚠️ 两个触发入口，缺一不可：
 *   - `.sw-arrow:hover`：箭头自己就是可点元素时（少见）
 *   - `.sw-host:hover`：**常态** —— 箭头长在一整行 / 一整张卡里，用户 hover 的是那个容器
 *     而不是这个 22px 的圆。调用方在容器上加一个 sw-host 类即可，不用把动画规则抄一遍。
 *     不做这一层的话，鼠标划过行、箭头纹丝不动，看起来像坏了。 */
.sw-arrow:hover .sw-arrow-img--outgoing,
.sw-host:hover .sw-arrow-img--outgoing {
  opacity: 0;
  transform: translate(calc(-50% + 18px), calc(-50% - 18px));
  transition-timing-function: cubic-bezier(0.1, 0.2, 0.9, 1);
}
.sw-arrow:hover .sw-arrow-img--incoming,
.sw-host:hover .sw-arrow-img--incoming {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: 0.15s;
}

/* tone=invert：底转品牌蓝、箭头转白。 */
.sw-arrow--invert:hover,
.sw-host:hover .sw-arrow--invert {
  background: #2e84fa;
}
.sw-arrow--invert:hover .sw-arrow-img,
.sw-host:hover .sw-arrow--invert .sw-arrow-img {
  filter: brightness(0) invert(1);
}

/* tone=brand：**底色不动**，只有箭头转品牌蓝。给本身已有 hover 底色的容器用 ——
   那里再叠一块蓝圆会跟整行/整卡的高亮打架。
   #2e84fa 的 filter 链（从黑色源图算出）：invert 45% + hue-rotate 到蓝相。 */
.sw-arrow--brand:hover .sw-arrow-img,
.sw-host:hover .sw-arrow--brand .sw-arrow-img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(72%) saturate(2300%) hue-rotate(199deg)
    brightness(101%) contrast(94%);
}

@media (prefers-reduced-motion: reduce) {
  .sw-arrow,
  .sw-arrow-img {
    transition: none;
  }
}

/* 用法：
 *   <a className="my-row sw-host"> … <SwapArrow tone="brand" /> </a>
 * 容器加 sw-host，箭头就跟着整行的 hover 动。箭头自己是可点元素时可以不加。 */