@use '@/assets/bundle.scss';

// 顶部二级菜单
.top-cats {
  display: flex;
  align-items: center;
  position: relative;
  // 遮罩
  &:after {
    content: "";
    display: block;
    position: absolute;
    background: linear-gradient(to left, white, rgba(white, 0));
    right: 15%;
    width: 80rpx;
    height: 100%;
  }
  .scroll-x {
    // white-space: nowrap;
    width: 85%;
    // background: red;
    
    .scroll-area {
      display: flex;
      align-items: center;
    }
    .scroll-item {
      // display: inline-block;
      flex: none;
      font-size: 28rpx;
      padding: 20rpx;
    }
    .scroll-item-placeholder {
      flex: none;
      width: 80rpx;
      height: 50rpx;
    }
    .cat-active {
      color: #4EB331;
      border: 1rpx solid #4EB331;
      padding: 4rpx 10rpx;
      background: rgb(234, 240, 227);
      border-radius: 10rpx;
    }
  }
  .btn-up-down {
    width: 15%;
    height: 79rpx;
    // @include svg_icon(arraw-up, 9a9a9a);
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANRJREFUWEft1MENwjAMBVB7AlZhhLJJOcRnRuGcHOgmdARWYQKjSI0UFUKSn0Mvzr35L1+1mQ4+fHA+GcAasAasgaEGvPdzXGQisqALDQZs4Y8t+IoiIEAKV9V3BDDziYggRDcgD2fmKQJUdUURXYB9uIi8IsB7f0YRzYBSePr5UEQToBY+gqgCWsNRxF9AbziCKALQ8F7ET8BoeA/iCxBCmFT1GZdMnPM0auiqzaeDmS/OuTW/q9TAnYiW0fC8CSKaReS2f0h1CtCXt35nAGvAGrAGPjJjsyGUY8cAAAAAAElFTkSuQmCC");
    background-size: 20rpx;
    @extend %bg-no-repeat-center;
    transform: rotateX(180deg);
    transition: all .5s;
  }
  .arrow-active {
    transform: rotateX(0);
  }
}