///* flex布局 */
.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}


.flex-auto {
  flex: 1;
  overflow: hidden;
}

.flex-center {
  @extend .flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.flex-margin {
  margin: auto;
}

.flex-warp {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 -5px;

  .flex-warp-item {
    padding: 5px;

    .flex-warp-item-box {
      width: 100%;
      height: 100%;
    }
  }
}

.flex-just-between {
  justify-content: space-between;
}

.flex-just-around {
  justify-content: space-around;
}

.flex-justify-center {
  justify-content: center;
}

.flex-align-items-center {
  align-items: center;
  align-content: center;
}

.flex-just-end {
  justify-content: flex-end;
}


.w50 {
  width: 50% !important;
}

.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
}

.vh100 {
  height: 100vh !important;
}


/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 20 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
  .pv#{$i} {
    padding: #{$i}px auto !important;
  }

  .ph#{$i} {
    padding: auto #{$i}px !important;
  }

  .pd#{$i} {
    padding: #{$i}px !important;
  }

  .mv#{$i} {
    margin: #{$i}px auto !important;
  }

  .mh#{$i} {
    margin: auto #{$i}px !important;
  }
  .mg#{$i} {
    margin: #{$i}px #{$i}px !important;
  }
}


@for $i from 2 to 100 {
  .fs-#{$i} {
    font-size: #{$i}rpx;
  }
  .lh-#{$i} {
    line-height: #{$i}rpx;
  }
}

.fs-0 {
  font-size: 0px;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-bold {
  font-weight: bold;
}

.lh-0 {
  line-height: 0px;
}

.lh-normal {
  line-height: normal;
}

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


$position: top, right, bottom, left;

@each $item in $position {
  .m#{str-slice($item, 0, 1)}-auto {
    margin-#{$item}: auto;
  }
  .m#{str-slice($item, 0, 1)}-0 {
    margin-#{$item}: 0px;
  }
}

@for $i from 2 to 100 {
  @each $item in $position {
    .m#{str-slice($item, 0, 1)}-#{$i} {
      margin-#{$item}: #{$i}rpx;
    }
    .p#{str-slice($item, 0, 1)}-#{$i} {
      padding-#{$item}: #{$i}rpx;
    }
  }
  .height-#{$i} {
    height: #{$i}rpx;
  }
  .width-#{$i} {
    width: #{$i}rpx;
  }
  .br-#{$i} {
    border-radius: #{$i}rpx;
  }
}

.br-round {
  border-radius: 50%;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-auto {
  margin-left: auto;
}

.mt-auto {
  margin-top: auto;
}

.width-168 {
  width: 168rpx;
}

.width-half {
  width: 50%;
}