@import "../../styles/themes/variable.scss";

#{$xh-prefix}-tabbar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  &-nav-scroll {
    // width: 100%;
    overflow-x: scroll; /* 横向滚动 */
    overflow-y: hidden; /* 隐藏纵向滚动 */
    height: 87px;
    box-sizing: border-box;
    webkit-overflow-scrolling: touch; /* 在iOS设备上启用惯性滚动 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
  }

  &-nav {
    min-width: 100%;
    height: 100%;
    display: flex;
    white-space: nowrap; /* 防止内容换行 */
    align-items: center;
    font-size: 34px;
    position: relative;
    box-sizing: border-box;

    &-item {
      box-sizing: border-box; /* 核心：padding包含在宽高内 */
      text-align: center;
      flex-shrink: 0; /* 防止项目缩小 */
      white-space: nowrap;
    }
    &-line {
      width: 60px;
      height: 6px;
      border-radius: 100px;
      position: absolute;
      bottom: 0;
      transition: transform 0.3s ease, width 0.3s ease;
      transform-origin: center center;
      transition: all 0.3s;
      // &-active {
      //   transition: all 0.3s;
      // }
    }
  }
  &-content {
    flex: 1;
    overflow-y: scroll;
    &-item {
      overflow: hidden;
      width: 750px;
      float: left;
      box-sizing: border-box;
    }
    &-item-dispaly {
      display: none;
    }
    &-item-active {
      transition-duration: 0.5s;
    }
  }

  .more-item {
    padding: 0 20px;
    box-sizing: border-box; /* 强制继承，防止被覆盖 */
  }
}