@RES_PATH: "/src/assets/";
@webp: "?x-oss-process=image/format,webp";
.sparkBg(@value) {
  background: url("@{RES_PATH}@{value}") no-repeat top left / 100% 100%;
}

.webpBg(@value) {
  .sparkBg("@{value}");
  [duiba-webp="true"] & {
    .sparkBg("@{value}@{webp}");
  }
}

// 活动规则
.ruleStyle {
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
}

// 垂直居中
.col-center {
  top: 50%;
  transform: translateY(-50%);
}


// 超出隐藏
.textOverflow() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 多行显示省略号
.overflow-hidden(@clamp:2) {
  -webkit-box-orient: vertical; // 避免压缩后删除此行
  -webkit-line-clamp: @clamp; // 显示省略号行数
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

// 隐藏滚动条
.hideScrollbar() {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

// 按钮、图片置灰
.disabled(){
  filter: grayscale(100%);
}

// 渐变色字体
.text-color(@color1,@color2){
  background-image: linear-gradient(@color1,@color2);
  background-clip: text;
  color: transparent;
}

.text-shadow(@px,@color) {
  text-shadow: -@px @px 0 @color, @px @px 0 @color, @px -@px 0 @color, -@px -@px 0 @color;
}


//按钮呼吸动效
.btnBreathStyle(@s:2s) {
  animation: btnBreathAni @s forwards infinite;
}
@keyframes btnBreathAni {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

// 弹窗缩放弹出
.zoom() {
  animation: scale 1s forwards;
  @keyframes scale {
    0% {
      transform: translateY(-50%) scale(0);
    }
    80% {
      transform: translateY(-50%) scale(1.05);
    }
    100% {
      transform: translateY(-50%) scale(1);
    }
  }
}

//底部滑动进入
.upShow() {
  animation: upShowAni 1s forwards;
}

@keyframes upShowAni {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

// 旋转出现动效
.rotateShow() {
  animation: rotateAni 0.8s forwards;
}

@keyframes rotateAni {
  0% {
    transform: rotateY(0deg) scale(0);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

// 手指引导
.guide() {
  animation: guide 2s infinite;
  @keyframes guide {
    0% {
      transform: translate(20px,10px);
    }
    25% {
      transform: translate(-20px,-10px);
    }
    50% {
      transform: translate(20px,10px);
    }
    75% {
      transform: translate(-20px,-10px);
    }
    100% {
      transform: translate(20px,10px);
    }
  }
}

// 淡出
.gradient() {
  animation: gradient 0.5s forwards;
  @keyframes gradient {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}