/* ============================================================
   dropdown.css — 共享下拉组件样式
   结构、动画与默认令牌; 各站点在自有样式表中覆盖 --dd-* 令牌
   适配本站配色 (主站: global-pretty.css; langref: style.css)
   ============================================================ */

/* ── 设计令牌 (站点可覆盖) ─────────────────────────────── */

.pretty-dropdown {
  /* 面板表面与文字 */
  --dd-bg: #ffffff;
  --dd-fg: #18181b;
  /* 边框与分隔线 */
  --dd-border: rgba(15, 23, 42, 0.1);
  /* 弱化文字 (标签 / 快捷键) */
  --dd-muted-fg: #52525b;
  /* 菜单项悬停 / 高亮背景 */
  --dd-accent: rgba(15, 23, 42, 0.05);
  --dd-accent-fg: #18181b;
  /* 当前项强调色 */
  --dd-current-fg: #18181b;
  /* 聚焦光环 */
  --dd-ring: #3b82f6;
  /* 面板投影 */
  --dd-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  /* 统一圆角 */
  --dd-radius: 8px;
  /* 分隔线选项 (separated) 的线条颜色 */
  --dd-separator: var(--dd-border);

  /* 触发按钮表面 */
  --dd-trigger-bg: transparent;
  --dd-trigger-fg: #374151;

  position: relative;
  display: inline-block;
}

/* 组件自带盒模型: 不依赖宿主站点是否有全局 border-box reset
   (langref 有全局 reset, 主站没有; content-box 下面板 width: 100%
   会叠加 padding 溢出) */
.pretty-dropdown,
.pretty-dropdown *,
.pretty-dropdown *::before,
.pretty-dropdown *::after {
  box-sizing: border-box;
}

/* 暗色默认令牌: 站点覆盖后以站点值为准 */
@media (prefers-color-scheme: dark) {
  .pretty-dropdown {
    --dd-bg: #18181b;
    --dd-fg: #fafafa;
    --dd-border: rgba(255, 255, 255, 0.1);
    --dd-muted-fg: #a1a1aa;
    --dd-accent: #3f3f46;
    --dd-accent-fg: #fafafa;
    --dd-current-fg: #fafafa;
    --dd-ring: #a1a1aa;
    --dd-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 10px 30px rgba(0, 0, 0, 0.45);
    --dd-trigger-bg: rgba(255, 255, 255, 0.045);
    --dd-trigger-fg: #d4d4d8;
  }
}

/* ── 触发按钮 ─────────────────────────────────────────── */

.pretty-dropdown-trigger {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  background: var(--dd-trigger-bg);
  color: var(--dd-trigger-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.pretty-dropdown-trigger:hover {
  background: var(--dd-accent);
  color: var(--dd-accent-fg);
}

.pretty-dropdown-trigger[aria-expanded="true"] {
  background: var(--dd-accent);
  color: var(--dd-accent-fg);
}

.pretty-dropdown-trigger:focus-visible {
  border-color: var(--dd-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-ring) 50%, transparent);
}

.pretty-dropdown-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* 展开时 chevron 旋转 180° */
.pretty-dropdown-trigger .pretty-dropdown-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pretty-dropdown-trigger[aria-expanded="true"] .pretty-dropdown-chevron {
  transform: rotate(180deg);
}

/* ── 浮层面板 ─────────────────────────────────────────── */

.pretty-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  min-width: 128px;
  max-width: min(280px, calc(100vw - 16px));
  width: max-content;
  padding: 4px;
  border-radius: var(--dd-radius);
  background: var(--dd-bg);
  color: var(--dd-fg);
  box-shadow: var(--dd-shadow);
  outline: none;
  overflow: hidden;

  /* 开合动画: 淡入 + 微缩放, 原点贴 trigger 一侧 */
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pretty-dropdown-panel.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 朝上翻转: 面板位于 trigger 上方, 原点贴底边 */
.pretty-dropdown-panel[data-side="top"] {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom left;
}

/* 右对齐: 原点贴右缘 */
.pretty-dropdown-panel[data-align="end"] {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.pretty-dropdown-panel[data-side="top"][data-align="end"] {
  transform-origin: bottom right;
}

/* 面板视口约束: 引擎 (dropdown.js _position) 检测到面板溢出时追加,
   限制高度并在面板内滚动; 基类 overflow: hidden 的纵向限制被覆盖 */
.pretty-dropdown-panel--scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 面板内列表: 下拉列表是组件语义, 不显示文档流 marker, 也不带默认缩进 */
.pretty-dropdown-panel ul,
.pretty-dropdown-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 面板内元素 ───────────────────────────────────────── */

/* 分组标签 */
.pretty-dropdown-label {
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--dd-muted-fg);
}

/* 分隔线 */
.pretty-dropdown-separator {
  height: 1px;
  margin: 4px -4px;
  background: var(--dd-border);
}

/* 菜单项 */
.pretty-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: var(--dd-radius);
  font-size: 14px;
  line-height: 20px;
  color: var(--dd-fg);
  text-decoration: none;
  cursor: default;
  outline: none;
  user-select: none;
  white-space: nowrap;
}

/* 悬停 / 键盘高亮 */
.pretty-dropdown-item:hover,
.pretty-dropdown-item:focus,
.pretty-dropdown-item.highlighted {
  background: var(--dd-accent);
  color: var(--dd-accent-fg);
}

/* 禁用项 */
.pretty-dropdown-item[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* 当前项: 高亮文字并展示 checkmark 指示器 */
.pretty-dropdown-item[data-current="true"] {
  color: var(--dd-current-fg);
  font-weight: 600;
}

.pretty-dropdown-item .pretty-dropdown-indicator {
  display: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pretty-dropdown-item[data-current="true"] .pretty-dropdown-indicator {
  display: block;
}

/* 快捷键提示 */
.pretty-dropdown-shortcut {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dd-muted-fg);
}

/* ── 可选选项 (调用处在容器上加类启用) ─────────────────── */

/* 允许菜单项自动换行: 适用于长文本项 (如页内 TOC 的章节标题) */
.pretty-dropdown-wrappable .pretty-dropdown-item {
  white-space: normal;
  word-break: break-word;
}

/* 相邻菜单项间以浅灰细线分隔 (第一项上方无线) */
.pretty-dropdown-separated .pretty-dropdown-item + .pretty-dropdown-item {
  border-top: 1px solid var(--dd-separator);
}

/* 隐藏当前项的 checkmark 指示器 (高亮/加粗保留, 如页内 TOC 滚动高亮场景) */
.pretty-dropdown-no-indicator .pretty-dropdown-item[data-current="true"] .pretty-dropdown-indicator {
  display: none;
}

/* ── 移动端触控优化 ───────────────────────────────────── */

@media (pointer: coarse) {
  .pretty-dropdown-item {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}