/* ============================================================================
   COMPONENT: UI SCROLL NAV
   描述：三段式滚动导航组件 (Fixed | Scrollable | Action)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CONTAINER & LAYOUT
   ----------------------------------------------------------------------------
*/
/* 容器保持不变 */
.ui-scope-bar {
  position: relative;
  width: 100%;
  background-color: transparent;
}

/* 布局核心：双区对齐 */
.ui-scope-bar__layout {
  display: flex;
  align-items: center;
  /* 关键：把左组和右组撑开到两头 */
  justify-content: space-between;
  
  width: 100%;
  box-sizing: border-box;
  
  /* 上下间距 */
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);

  /* 左右间距（避让逻辑的核心） */
  /* 这里设置默认值，页面级 CSS 会动态改变这两个变量 */
  padding-left: var(--scope-safe-left, var(--space-md));
  padding-right: var(--scope-safe-right, var(--space-md));
  
  /* 独立的过渡动画 */
  transition:
    padding-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding-right 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: padding-left, padding-right;
}

/* [NEW] 左侧分组 (Fixed + Track) */
.ui-scope-bar__left {
  display: flex;
  align-items: center;
  
  /* 关键：占据剩余空间，但允许压缩 (min-width: 0 是 Flex 滚动的必要条件) */
  flex: 1;
  min-width: 0;
  
  /* 左侧内部可能会有间距，但一般由 children 处理 */
}

/* Zone B: Track (轨道) */
.ui-scope-bar__track {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  
  /* 滚动逻辑 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  
  /* 视觉修正 */
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.ui-scope-bar__track::-webkit-scrollbar { display: none; }

/* [NEW] 右侧分组 (Action) */
.ui-scope-bar__right {
  /* 防止被左侧挤压 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  /* 给左边留点距离，防止轨道内容贴脸 */
  padding-left: var(--space-md);
  
  /* 确保在 Action 区域之上 (z-index) */
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------------------
   2. ZONES (Fixed, Scroll, Action)
   ----------------------------------------------------------------------------
*/

/* Zone A: 固定区域 (e.g. ALL) */
.ui-scope-bar__fixed {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  
  /* 分隔线逻辑：右侧加一条淡淡的线 */
  padding-right: var(--space-sm);
  margin-right: var(--space-sm);
  border-right: 1px solid var(--color-border);
}

/* Zone B: 滚动区域 (核心) */
.ui-scope-bar__scroller {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  
  /* 滚动特性 */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  
  /* 隐藏滚动条 */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
  
  /* 平滑滚动 */
  scroll-behavior: smooth;
  
  /* 视觉修正 */
  padding-left: 4px; /* 防止第一个项目的 focus ring 被切掉 */
  padding-right: var(--space-sm);
  
  /* 动画过渡 */
  transition: all 0.3s ease;
}
.ui-scope-bar__scroller::-webkit-scrollbar { display: none; }


/* Zone C: 操作区域 (Toggle Button) */
.ui-scope-bar__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: var(--space-xs);
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------------------
   3. ITEMS (Buttons)
   基础样式，具体外观可以由外部 override
   ----------------------------------------------------------------------------
*/
.ui-scope-bar__item {
  /* Reset Button Styles */
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0; /* 上下留白 */
  
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  white-space: nowrap;
  
  position: relative;
  transition: color 0.2s ease;
}

/* Hover & Active States */
@media (hover: hover) {
  .ui-scope-bar__item:hover {
    color: var(--color-text-main);
  }
}

.ui-scope-bar__item.is-active {
  color: var(--color-text-main);
  font-weight: var(--weight-medium); /* 可选：激活加粗 */
}

/* 激活下划线点缀 (复用你原来的设计) */
.ui-scope-bar__item.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-primary);
}


/* ----------------------------------------------------------------------------
   4. TOGGLE BUTTON (Icon)
   ----------------------------------------------------------------------------
*/
.ui-scope-bar__toggle {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  color: var(--color-text-main);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-scope-bar__toggle:hover {
  background-color: var(--color-text-main);
  color: var(--color-bg-body); /* 反色 */
  border-color: var(--color-text-main);
}

.ui-scope-bar__toggle svg {
  transition: transform 0.3s ease;
}


/* ----------------------------------------------------------------------------
   5. EXPANDED STATE (展开模式)
   当容器 .ui-scope-bar 拥有 .is-expanded 类时
   ----------------------------------------------------------------------------
*/

/* 1. 图标旋转 180度 */
.ui-scope-bar.is-expanded .ui-scope-bar__toggle svg {
  transform: rotate(180deg);
}

/* 2. 滚动区布局变更：从一行滚动变成多行网格 */
.ui-scope-bar.is-expanded .ui-scope-bar__track {
  flex-wrap: wrap; /* 允许换行 */
  overflow-x: visible; /* 解除滚动限制 */
  white-space: normal; /* 允许文字换行(虽然按钮通常不换行) */
  
  /* 布局调整：让按钮像 Tag 一样排列 */
  gap: var(--space-xs) var(--space-md); /* Row-gap Col-gap */
  
  /* 展开时可能需要占满宽度 */
  width: 100%;
}

/* 3. 布局容器适应 */
.ui-scope-bar.is-expanded .ui-scope-bar__layout {
  /* 展开时通常是把固定区和操作区推到两边，
     或者保持原样，具体看你希望 ALL 还是否在左侧。
     这里我们保持原样，只是 Scroll 区域变高了。
  */
  align-items: flex-start; /* 顶部对齐，防止按钮跑偏 */
}