.tab-wrapper {
  background-color: $theme-color-100;
  height: 48px;
  overflow-x: auto;
  /* 支持横向滚动 */
  -webkit-overflow-scrolling: touch;
  /* 平滑滚动（移动端） */
  white-space: nowrap;
  /* 防止换行 */
  justify-content: flex-start;
  /* 覆盖工具类，靠左排列以便滚动 */
}

.tab-item {
  height: 100%;
  flex: 0 0 auto;
  /* 不让子项拉伸，按内容宽度排列 */
  padding: 0 12px;
  /* 增加横向间距，便于触控 */
  min-width: 68px;
  /* 保证可点击区域 */
}

.icon {
  height: 20px;
  width: 20px;
  color: #525866;
}

.icon-active {
  color: #0ccd58;
}

/* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
.tab-item > .absolute {
  position: static !important;
  display: flex;
  align-items: center;
}

.tab-item-active {
  &::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    right: 4px;
    bottom: 0;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    transform: perspective(40px) rotateX(6deg) translate(0, -1px);
    transform-origin: bottom bottom;
    box-shadow: 0 -0.5px 0 #0ccd58;
  }
}

.tab-text-active {
  color: #0ccd58;
  z-index: 3;
}

/* 已改为每项内部指示器，移除了全局指示器样式 */

/* 每项内的指示器（替代全局指示器） */
.tab-item-inner {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  /* 确保内容（icon/text）位于 .tab-item-active::before 之上 */
}

.tab-item-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0.9);
  height: 3px;
  width: 24px;
  background-color: #0ccd58;
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 3;
}

.tab-item-indicator.visible {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}