/* ==========================================================================
   可选择芯片组件 (Chip)
   ==========================================================================

   设计目标：
   提供可交互的选择芯片，用于 toggle 选择、多选标签、平台筛选等场景。
   与展示型 zuoekai-tag 不同，本组件强调"可点击、可切换"的按钮行为。

   典型用例：
   - 店铺标记中"已开通平台"的多选配置
   - 筛选面板中的快捷标签选择
   - 任何需要用户从一组选项中 toggle 选中/取消的场景

   结构约定：
   <button class="zuoekai-chip [修饰符]" type="button" aria-pressed="false">
     <span class="zuoekai-chip__dot"></span>
     <span class="zuoekai-chip__label">标签文字</span>
   </button>

   修饰符：
   - 尺寸：zuoekai-chip--sm / (默认md) / zuoekai-chip--lg
   - 激活色：(默认brand渐变) / zuoekai-chip--blue / zuoekai-chip--green
   - 状态：.is-active（激活/选中）

   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基础样式
   -------------------------------------------------------------------------- */
.zuoekai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;                         /* 内部元素间距 */
  padding: 0.5rem 1rem;                  /* 内边距 */
  min-width: 5rem;                       /* 最小宽度，避免过窄 */
  border-radius: 0.5rem;                 /* 圆角 */
  font-size: 0.75rem;                    /* 12px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--zuoekai-color-text);
  background: var(--zuoekai-color-surface-panel);
  border: 1px solid var(--zuoekai-color-border);
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.15s ease,
    background-image 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* --------------------------------------------------------------------------
   2. 交互状态
   -------------------------------------------------------------------------- */

/* 悬浮 */
.zuoekai-chip:hover {
  filter: brightness(0.97);
}

/* 聚焦（无障碍） */
.zuoekai-chip:focus-visible {
  box-shadow: var(--zuoekai-focus-ring);
  outline: none;
}

/* 禁用 */
.zuoekai-chip:disabled,
.zuoekai-chip[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. 激活/选中状态 (is-active)
   --------------------------------------------------------------------------
   默认激活态使用品牌渐变色，与主题保持一致。
   -------------------------------------------------------------------------- */
.zuoekai-chip.is-active {
  color: var(--zuoekai-color-text-inverse);
  background-image: var(--zuoekai-gradient-primary);
  border-color: transparent;
  box-shadow: var(--zuoekai-primary-shadow);
}

.zuoekai-chip.is-active:hover {
  filter: brightness(1.05);
  box-shadow: var(--zuoekai-primary-shadow-hover);
}

/* --------------------------------------------------------------------------
   4. 激活色变体说明
   --------------------------------------------------------------------------
   所有芯片的激活态统一使用品牌渐变 var(--zuoekai-gradient-primary)，
   确保切换主题时芯片颜色同步变幻。
   颜色修饰符（--blue / --green / --purple / --orange）仅影响未激活时
   的指示点颜色，用于分组视觉区分。激活态一律跟随主题渐变。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. 指示点 (Dot)
   -------------------------------------------------------------------------- */
.zuoekai-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--zuoekai-color-brand-500);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

/* 激活时小圆点变白 */
.zuoekai-chip.is-active .zuoekai-chip__dot {
  background: var(--zuoekai-color-text-inverse);
}

/* 所有变体的未激活点色统一跟随主题品牌色，无需额外覆盖 */

/* --------------------------------------------------------------------------
   6. 标签文字 (Label)
   -------------------------------------------------------------------------- */
.zuoekai-chip__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   7. 尺寸变体 (Sizes)
   -------------------------------------------------------------------------- */

/* 小号 */
.zuoekai-chip--sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;                  /* 11px */
  gap: 0.25rem;
  min-width: 4rem;
  border-radius: 0.375rem;
}

.zuoekai-chip--sm .zuoekai-chip__dot {
  width: 5px;
  height: 5px;
}

/* 大号 */
.zuoekai-chip--lg {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;                   /* 14px */
  gap: 0.5rem;
  min-width: 7rem;
  border-radius: 0.625rem;
}

.zuoekai-chip--lg .zuoekai-chip__dot {
  width: 8px;
  height: 8px;
}

/* --------------------------------------------------------------------------
   8. 布局辅助：芯片组 (Chip Group)
   --------------------------------------------------------------------------
   将多个芯片以 flex-wrap 排列，统一间距。
   -------------------------------------------------------------------------- */
.zuoekai-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;                           /* 8px */
  align-items: center;
  min-height: 44px;                      /* 默认最小高度，避免加载时塌陷 */
}

/* 芯片组 - 撑满变体：flex:1 占据剩余空间（用于与其他元素并排时） */
.zuoekai-chip-group--fill {
  flex: 1;
}

/* --------------------------------------------------------------------------
   9. 暗色模式 (Dark Mode)
   --------------------------------------------------------------------------
   通过 tokens.css 中 [data-zuoekai-mode="dark"] 已自动覆盖 surface/text/border
   变量，此处仅补充 html.dark 选择器以兼容旧版切换方式。
   -------------------------------------------------------------------------- */
html.dark .zuoekai-chip,
[data-zuoekai-mode="dark"] .zuoekai-chip {
  background: var(--zuoekai-color-surface-panel);
  color: var(--zuoekai-color-text);
  border-color: var(--zuoekai-color-border);
}

html.dark .zuoekai-chip:hover,
[data-zuoekai-mode="dark"] .zuoekai-chip:hover {
  filter: brightness(1.1);
}

/* 暗色模式下激活态：复用品牌渐变 */
html.dark .zuoekai-chip.is-active,
[data-zuoekai-mode="dark"] .zuoekai-chip.is-active {
  background-image: var(--zuoekai-gradient-primary);
  color: var(--zuoekai-color-text-inverse);
  border-color: transparent;
}

/* 暗色模式下所有颜色变体激活态均跟随品牌渐变，无需额外覆盖 */

/* --------------------------------------------------------------------------
   10. 响应式适配 (Responsive)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .zuoekai-chip {
    padding: 0.4rem 0.75rem;
    min-width: 4.5rem;
    font-size: 0.6875rem;
  }

  .zuoekai-chip--lg {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    min-width: 5.5rem;
  }

  /* 芯片组在小屏幕下缩小间距 */
  .zuoekai-chip-group {
    gap: 0.375rem;
  }
}