@use "sass:string";

$position: top, right, bottom, left;

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

@for $i from 2 to 100 {
  @each $item in $position {
    .m#{string.slice($item, 0, 1)}-#{$i} {
      margin-#{$item}: #{$i}rpx;
    }
    .p#{string.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%;
}