$numbers: (
  0: 0,
  2: 2px,
  4: 4px,
  6: 6px,
  8: 8px,
  9: 9px,
  10: 10px,
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  22: 22px,
  24: 24px,
  26: 26px,
  28: 28px,
  30: 30px,
  32: 32px,
  34: 34px,
  36: 36px,
  38: 38px,
  40: 40px,
  42: 42px,
  44: 44px,
  46: 46px,
  48: 48px,
  50: 50px,
  52: 52px,
  54: 54px,
  56: 56px,
  58: 58px,
  60: 60px,
  62: 62px,
  64: 64px,
  66: 66px,
  68: 68px,
  70: 70px,
  72: 72px,
  74: 74px,
  76: 76px,
  78: 78px,
  80: 80px,
  82: 82px,
  84: 84px,
  86: 86px,
  88: 88px,
  90: 90px,
  92: 92px,
  94: 94px,
  96: 96px,
  98: 98px,
  100: 100px,
  102: 102px,
  104: 104px,
  106: 106px,
  108: 108px,
  110: 110px,
  112: 112px,
  114: 114px,
  116: 116px,
  118: 118px,
  120: 120px,
  122: 122px,
  124: 124px,
  126: 126px,
  128: 128px,
  130: 130px,
  132: 132px,
  134: 134px,
  136: 136px,
  138: 138px,
  140: 140px,
  150: 150px,
  160: 160px,
  170: 170px,
  180: 180px,
  190: 190px,
  200: 200px,
  300: 300px,
  400: 400px,
  500: 500px,
  600: 600px,
  700: 700px,
  800: 800px,
);

// 生成 margin 工具类
@each $key, $value in $numbers {

  // margin
  .m-#{$key} {
    margin: $value;
  }

  .mt-#{$key} {
    margin-top: $value;
  }

  .mr-#{$key} {
    margin-right: $value;
  }

  .mb-#{$key} {
    margin-bottom: $value;
  }

  .ml-#{$key} {
    margin-left: $value;
  }

  .mx-#{$key} {
    margin-left: $value;
    margin-right: $value;
  }

  .my-#{$key} {
    margin-top: $value;
    margin-bottom: $value;
  }

  // padding
  .p-#{$key} {
    padding: $value;
  }

  .pt-#{$key} {
    padding-top: $value;
  }

  .pr-#{$key} {
    padding-right: $value;
  }

  .pb-#{$key} {
    padding-bottom: $value;
  }

  .pl-#{$key} {
    padding-left: $value;
  }

  .px-#{$key} {
    padding-left: $value;
    padding-right: $value;
  }

  .py-#{$key} {
    padding-top: $value;
    padding-bottom: $value;
  }

  .top-#{$key} {
    top: $value;
  }

  .right-#{$key} {
    right: $value;
  }

  .bottom-#{$key} {
    bottom: $value;
  }

  .left-#{$key} {
    left: $value;
  }


  // 字体大小
  .fs-#{$key} {
    font-size: $value;
  }

  // 别名
  .fz-#{$key} {
    font-size: $value;
  }

  // 宽度
  .w-#{$key} {
    width: $value;
  }

  // 高度
  .h-#{$key} {
    height: $value;
  }

  .min-w-#{$key} {
    min-width: $value;
  }

  .min-h-#{$key} {
    min-height: $value;
  }

  .max-w-#{$key} {
    max-width: $value;
  }

  .max-h-#{$key} {
    max-height: $value;
  }

  // 圆角
  .rounded-#{$key} {
    border-radius: $value;
  }

  .rounded-t-#{$key} {
    border-top-left-radius: $value;
    border-top-right-radius: $value;
  }

  .rounded-r-#{$key} {
    border-top-right-radius: $value;
    border-bottom-right-radius: $value;
  }

  .rounded-b-#{$key} {
    border-bottom-right-radius: $value;
    border-bottom-left-radius: $value;
  }

  .rounded-l-#{$key} {
    border-top-left-radius: $value;
    border-bottom-left-radius: $value;
  }

  .rounded-tl-#{$key} {
    border-top-left-radius: $value;
  }

  .rounded-tr-#{$key} {
    border-top-right-radius: $value;
  }

  .rounded-br-#{$key} {
    border-bottom-right-radius: $value;
  }

  .rounded-bl-#{$key} {
    border-bottom-left-radius: $value;
  }

  // 行高
  .line-h#{$key} {
    line-height: $value;
  }
}

.rounded-circle {
  border-radius: 50%;
}


// 特殊的 margin: auto
.m-auto {
  margin: auto;
}

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

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

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

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

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

// Regular (Normal)
.fw-500 {
  font-weight: 500;
}

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

// Semi Bold
.fw-700 {
  font-weight: 700;
}

// Bold
.fw-800 {
  font-weight: 800;
}

// Extra Bold
.fw-900 {
  font-weight: 900;
}

// 常用别名
.fw-bold {
  font-weight: bold;
}


.w-auto {
  width: auto;
}

// 视口宽度
.w-100vw {
  width: 100vw;
}

.w-b100 {
  width: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-b100 {
  height: 100%;
}



// 文本对齐
.text-left {
  text-align: left;
}

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

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

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

// 文本颜色（示例，可以扩展）
@each $color, $value in (primary: #1890ff,
  success: #52c41a,
  warning: #faad14,
  error: #ff4d4f,
  fff: #ffffff,
  f5: #f5f5f5,
  '000': #000000,
  '333': #333333,
  '444': #444444,
  '555': #555555,
  '666': #666666,
  '888': #888888,
  '999': #999999) {
  .text-#{$color} {
    color: $value;
  }

  .bg-#{$color} {
    background-color: $value;
  }
}


// 行高
.line-height-1 {
  line-height: 1;
}

.line-height-1-2 {
  line-height: 1.2;
}

.line-height-1-5 {
  line-height: 1.5;
}

.line-height-2 {
  line-height: 2;
}

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


// 显示方式
.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.grid {
  display: grid;
}

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

.hidden {
  display: none;
}

// 位置
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

// 溢出
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

// 光标样式
.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-move {
  cursor: move;
}

.cursor-wait {
  cursor: wait;
}

// 用户选择
.select-none {
  user-select: none;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

// // 不透明度
// @each $value in 0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100 {
//   .opacity-#{$value} {
//     opacity: #{$value / 100};
//   }
// }

// ============================================
// 8. Flex 布局工具类
// ============================================

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

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

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

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

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

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

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

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

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

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

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

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

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

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

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

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

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.gap-0 {
  gap: 0;
}

@each $key, $value in $numbers {
  .gap-#{$key} {
    gap: $value;
  }
}

.text-over-1 {
  width: 200px;
  /* 必须设置宽度 */
  white-space: nowrap;
  /* 强制文本不换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

.text-over-2 {
  display: -webkit-box;
  /* 弹性盒模型 */
  -webkit-line-clamp: 2;
  /* 限制显示行数 */
  -webkit-box-orient: vertical;
  /* 垂直排列 */
  overflow: hidden;
  /* 隐藏溢出 */
  word-break: break-word;
  /* 长单词换行（可选） */
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}