@base-color: #975ec9;
@common-wd: 30px;
@assets-img: '../assets/images/';
@base-red: #F20500;

.flex(@justify-content: center, @align-items: center) when (iskeyword(@justify-content)), (iskeyword(@align-items)){
  display: flex;
  justify-content: @justify-content;
  align-items: @align-items;
}

.commonBack(@url) when (isstring(@url)){
  background: url("@{assets-img}@{url}") no-repeat center;
  background-size: 100%;
}

.coverScreen(@position: absolute, @backColor: #fff) when (iskeyword(@position)), (iscolor(@backColor)){
  position: @position;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: @backColor;
}

.positionCenter(@position: absolute) when (iskeyword(@position)){
  position: @position;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.positionLeft(@position: absolute, @left: @common-wd) when (iskeyword(@position)), (ispixel(@left)){
  position: @position;
  top: 50%;
  left: @left;
  transform: translate3d(0, -50%, 0);
}

.positionRight(@position: absolute, @right: @common-wd) when (iskeyword(@position)), (ispixel(@right)){
  position: @position;
  top: 50%;
  right: @right;
  transform: translate3d(0, -50%, 0);
}

.font(@font-size, @color: #333, @text-align: left) when (ispixel(@font-size)), (iscolor(@color)), (iskeyword(@text-align)) {
  font-size: @font-size;
  color: @color;
  text-align: @text-align;
}

.wh(@w, @h) when (ispixel(@w))or(ispercentage(@w)), (ispixel(@h))or(ispercentage(@h)){
  width: @w;
  height: @h;
}