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

  --p: url("@{RES_PATH}@{value}");
  background-image: var(--p);

  [duiba-webp='true'] & {
    --p: url("@{RES_PATH}@{value}@{webp}");
    background-image: var(--p);
  }
}

.webpBg(@value) {
  .sparkBg("@{value}");
}


.mask(@value) {
  mask-image: url("@{RES_PATH}@{value}");
  -webkit-mask-image: url("@{RES_PATH}@{value}");
  mask-repeat: no-repeat;
}

// 定位-水平垂直居中
.transform_center() {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

// flex-水平垂直居中
.flex_center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 文本过长隐藏文字并显示省略号 单行*/
.lineClamp1() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lineClampN(@num) {
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
  overflow: hidden;
}


// 按钮呼吸动效
.breathAnimation() {
  animation: scale 1s linear infinite alternate;

  @keyframes scale {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.12);
    }
  }
}

// 弹窗居中缩放动效
// 注意 加该样式的元素居中方式不能用translate(-50%, -50%)
// 可以用margin-left、margin-top为负的宽度、高度的一半
.popupCenterShow() {
  animation: centerShowAni 300ms ease-out;

  @keyframes centerShowAni {
    0% {
      transform: scale(0);
    }

    66.7% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }
}

// 渐入动画
.fade-in {
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 隐藏滚动条
.hideScrollbar() {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}

.ruleStyle {
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
}

// 上滑弹窗动画
.topPop_move {
  animation: move_top_ani 500ms ease-in-out;

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

    100% {
      transform: translateY(0);
    }
  }
}


.imgCenter(@width:100px, @height:100px,@left:50%,@top:50%) {
  max-width: @width;
  max-height: @height;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-@left, -@top);
}
// 弹窗进入
.pop_move {
  animation: scale_ani 500ms ease-in-out 0ms;
  @keyframes scale_ani {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
}

.grey {
  filter: grayscale(100%);
}