@import "../styles/imgVar.less";
@dist: 60px;
.tabs {
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  background: rgba(255, 255, 255, 1);
  padding: 0 @dist !important;
  overflow: hidden;
  &.fixed {
    position: fixed;
  }
  &.page {
    padding: 0 @dist+10 !important;
  }
  &__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    // 隐藏了但是真机上还会存在
    &::-webkit-scrollbar {
      display: none;
    }
    // 真机要采用父元素隐藏的方式
    padding-bottom: 30px;
    box-sizing: content-box;
  }
  &__list {
    display: inline-block;
    height: 100%;
    line-height: 76px;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }
  &__item {
    display: inline-block;
    margin-left: @dist;
    font-size: 28px;
    color: rgba(187, 187, 187, 1);
    &:first-child {
      margin-left: 0;
    }
    &.selected {
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
    }
  }
  &__line {
    position: absolute;
    left: 0;
    // bottom: 0;
    bottom: 30px;
    width: 26px;
    height: 3px;
    background: rgba(253, 213, 53, 1);
    &.ani {
      transition: all 0.3s ease-in-out 0.05s;
    }
  }
  .btn {
    @dist: 5px;
    color: #bbb;
    padding: 15px;
    font-weight: bold;
    font-family: fantasy;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 28px;
    &--left {
      left: @dist;
    }
    &--right {
      right: @dist;
    }
  }
}
