/*
    margin padding fontSize 通用样式表
*/
.loop(@counter) when (@counter > 0) {
  .o-p-@{counter} {
    padding: (1px * @counter);
  }

  .o-ptb-@{counter} {
    padding-top: (1px * @counter);
    padding-bottom: (1px * @counter);
  }

  .o-plr-@{counter} {
    padding-right: (1px * @counter);
    padding-left: (1px * @counter);
  }

  .o-pt-@{counter} {
    padding-top: (1px * @counter);
  }

  .o-pr-@{counter} {
    padding-right: (1px * @counter);
  }

  .o-pb-@{counter} {
    padding-bottom: (1px * @counter);
  }

  .o-pl-@{counter} {
    padding-left: (1px * @counter);
  }

  .o-m-@{counter} {
    margin: (1px * @counter);
  }

  .o-mtb-@{counter} {
    margin-top: (1px * @counter);
    margin-bottom: (1px * @counter);
  }

  .o-mlr-@{counter} {
    margin-right: (1px * @counter);
    margin-left: (1px * @counter);
  }

  .o-mt-@{counter} {
    margin-top: (1px * @counter);
  }

  .o-mr-@{counter} {
    margin-right: (1px * @counter);
  }

  .o-mb-@{counter} {
    margin-bottom: (1px * @counter);
  }

  .o-ml-@{counter} {
    margin-left: (1px * @counter);
  }

  .c-text-@{counter} {
    font-size: (1px * @counter);
  }

  .c-radius-@{counter} {
    border-radius: (1px * @counter);
  }

  .loop((@counter - 1)); // 递归调用自身
}

.loop(200);

/*超过一行显示省略号*/
.c-text-line1 {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出则不换行
}

/*全局border*/
.c-border {
  border-radius: 2px;
  border: 1px solid #b9bad0;
}

/* 隐藏 */
.hidden {
  visibility: hidden;
}

.overHid {
  overflow: hidden;
}

/* 全局宽度 */
.o-w {
  width: 100%;
}

.o-h {
  height: 100%;
}

.c-text-c {
  text-align: center;
}

.c-text-r {
  text-align: right;
}

.c-text-b {
  font-weight: bold;
}

.c-text-color {
  color: #404d74;
}

.c-color {
  color: #8787a6;
}

.c-text-w5 {
  font-weight: 500;
}

.c-text-w6 {
  font-weight: 600;
}

/* 盒模型转换 */
.l-bs {
  box-sizing: border-box;
}
.l-in {
  display: inline-block;
}
/* 全局阴影 */
.l-boxShadow {
  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
}

/* 自定义全局flex */
.l-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-flex-RC {
  display: flex;
  align-items: center;
}

.l-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-f {
  display: flex;
}

.l-flex-d {
  flex-direction: column;
}

.l-flex-w {
  flex-wrap: wrap;
}

.l-flex-j-c {
  justify-content: center;
}

.l-flex-j-b {
  justify-content: space-between;
}

.l-flex-j-a {
  justify-content: space-around;
}

.l-flex-j-e {
  justify-content: flex-end;
}

.l-flex-j-s {
  justify-content: flex-start;
}

.l-flex-c {
  align-items: center;
}

.l-flex-e {
  align-items: flex-end;
}

/* 定位相关 */
.l-re {
  position: relative;
}

.l-ab {
  position: absolute;
}

.l-fixed {
  position: fixed;
}

.c-color-c {
  color: #cccccc;
}

.c-color-0 {
  color: #000000;
}

.c-color-1 {
  color: #111111;
}

.c-color-3 {
  color: #333333;
}

.c-color-6 {
  color: #666666;
}

.c-color-9 {
  color: #999999;
}

.c-color-f {
  color: #ffffff;
}

.c-color-n {
  color: transparent;
}

.c-color-theme {
  color: #ff3456;
}

.c-bg-c {
  background-color: #cccccc;
}

.c-bg-0 {
  background-color: #000000;
}

.c-bg-9 {
  background-color: #999999;
}

.c-bg-f {
  background-color: #ffffff;
}

.c-bg-n {
  background-color: transparent;
}
