/*================变量==================*/ 
@primary-color: #C52733;
@dark-color: #333333;
@white-color: #fff;

@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red;
/*=====================================*/ 

each(@colors, {
  @color: extract(@colors, @index);
  @classname: extract(@classnames, @index);
  .v12-@{classname} {
    background-color: @color !important;
    background: @color !important;
  }
  .v12-@{classname}-text{
    color: @color !important;
  }
  .v12-@{classname}-border{
    border: 1px solid @color !important;
  }
});

/*===================字体大小======================*/ 
.generateFontSize(@i) when (@i <= 80) {
  .v12-font-@{i} {
    font-size: @i * 1rpx !important;
  }
  .generateFontSize(@i + 2);
}

.generateFontSize(0);

.v12-font-bold{
  font-weight: bold !important;
}
.generateFontWeight(@n, @i: 100) when (@i <= @n) {
  .v12-font-weight-@{i} {
    font-weight: @i !important;
  }
  .generateFontWeight(@n, (@i + 100))
}
.generateFontWeight(900);

/*==================内外边距====================*/ 
.generateMarginAndPadding(@n, @i:0) when (@i<= @n)  {
  @baseNum: @i * 8rpx;
  .v12-mt-@{i} {
    margin-top: @baseNum;
  }
  .v12-ml-@{i} {
    margin-left: @baseNum;
  }
  .v12-mr-@{i} {
    margin-right: @baseNum;
  }
  .v12-mb-@{i} {
    margin-bottom: @baseNum;
  }
  .v12-ma-@{i} {
    margin-left: @baseNum;
    margin-right: @baseNum;
    margin-bottom: @baseNum;
    margin-top: @baseNum;
  }
  .v12-mx-@{i} {
    margin-left: @baseNum;
    margin-right: @baseNum;
  }
  .v12-my-@{i} {
    margin-bottom: @baseNum;
    margin-top: @baseNum;
  }
  .v12-pt-@{i} {
    padding-top: @baseNum;
  }
  .v12-pl-@{i} {
    padding-left: @baseNum;
  }
  .v12-pr-@{i} {
    padding-right: @baseNum;
  }
  .v12-pb-@{i} {
    padding-bottom: @baseNum;
  }
  .v12-pa-@{i} {
    padding-top: @baseNum;
    padding-bottom: @baseNum;
    padding-right: @baseNum;
    padding-left: @baseNum;
  }
  .v12-px-@{i} {
    padding-right: @baseNum;
    padding-left: @baseNum;
  }
  .v12-py-@{i} {
    padding-top: @baseNum;
    padding-bottom: @baseNum;
  }
  .generateMarginAndPadding(@n, (@i + 1))
}
.generateMarginAndPadding(40);

/*==================圆角====================*/ 
.generateRadius(@n, @i: 0) when (@i <= @n) {
  @baseRadius: @i * 1rpx;
  .v12-radius-@{i} {
    border-radius: @baseRadius !important;
  }
  .generateRadius(@n, (@i + 1))
}
.generateRadius(100);
/*=========================================*/ 

.generateSpacing(@n, @i: 0) when(@i <= @n) {
  @baseSpacing:@i * 1rpx;
  .v12-spacing-@{i} {
    letter-spacing: @baseSpacing !important;
  }
  .generateSpacing(@n, (@i + 1))
}
.generateSpacing(100);
/*====================flex 函数表达式=====================*/

.v12-d-flex{
  display: flex !important;
}
.v12-flex-column {
  flex-direction: column;
}
.v12-align-center{
  display: flex;
  align-items: center;
}
.v12-align-start{
  display: flex;
  align-items: start;
}
.v12-align-end{
  display: flex;
  align-items: end;
}
.v12-align-baseline{
  display: flex;
  align-items: baseline;
}
.v12-justify-center{
  display: flex;
  justify-content: center;
}
.v12-justify-around{
  display: flex;
  justify-content: space-around;
}
.v12-justify-between{
  display: flex;
  justify-content: space-between;
}
.v12-justify-start{
  display: flex;
  justify-content: flex-start;
}
.v12-justify-end{
  display: flex;
  justify-content: flex-end;
}
.v12-d-grid-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


.v12-text-right{
  text-align: right;
}
.v12-text-left{
  text-align: left;
}
.v12-text-center{
  text-align: center;
}
.v12-btn{
  width: 136rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 50rpx;
  color: #fff;
  font-size: 27rpx;
}
.v12-full-width{
  width: 100%;
}