// ========================================
// 分段步长间距工具类生成器
// 规则：
//   0-120：偶数（0, 2, 4, 6, ..., 120）
//   120-240：步长 10（130, 140, 150, ..., 240）
//   240-800：步长 100（300, 400, 500, ..., 800）
// ========================================

@use "sass:list";
// ----- 生成数值列表 -----
$spacing-values: ();

// 1. 0-120
@for $i from 0 through 150 {
  // $value: $i * 1;
  $spacing-values: list.append($spacing-values, $i * 2);
  // 在这里直接生成 .m-#{$value} 等类
}

// 2. 120-240 步长 10
@for $i from 13 through 24 {
  $spacing-values: list.append($spacing-values, $i * 10);
  // 在这里直接生成 .m-#{$value} 等类
}

// 3. 240-800 步长 100
@for $i from 3 through 8 {
  $spacing-values: list.append($spacing-values, $i * 100);
  // 在这里直接生成 .m-#{$value} 等类
}

// ----- 批量生成间距类 -----
@each $value in $spacing-values {
  // Margin
  .m-#{$value} { margin: #{$value}px; }
  .mt-#{$value} { margin-top: #{$value}px; }
  .mb-#{$value} { margin-bottom: #{$value}px; }
  .ml-#{$value} { margin-left: #{$value}px; }
  .mr-#{$value} { margin-right: #{$value}px; }
  .mx-#{$value} { 
    margin-left: #{$value}px; 
    margin-right: #{$value}px; 
  }
  .my-#{$value} { 
    margin-top: #{$value}px; 
    margin-bottom: #{$value}px; 
  }
  
  // Padding
  .p-#{$value} { padding: #{$value}px; }
  .pt-#{$value} { padding-top: #{$value}px; }
  .pb-#{$value} { padding-bottom: #{$value}px; }
  .pl-#{$value} { padding-left: #{$value}px; }
  .pr-#{$value} { padding-right: #{$value}px; }
  .px-#{$value} { 
    padding-left: #{$value}px; 
    padding-right: #{$value}px; 
  }
  .py-#{$value} { 
    padding-top: #{$value}px; 
    padding-bottom: #{$value}px; 
  }

  // Width
  .w-#{$value} { width: #{$value}px; }
  // Height
  .h-#{$value} { height: #{$value}px; }
  .wh-#{$value} { width: #{$value}px; height: #{$value}px; }
  // Max Width
  .maxw-#{$value} { max-width: #{$value}px; }
  // Max Height
  .maxh-#{$value} { max-height: #{$value}px; }
  // Min Width
  .minw-#{$value} { min-width: #{$value}px; }
  // Min Height
  .minh-#{$value} { min-height: #{$value}px; }
  // 字体大小
  .fs-#{$value} { font-size: #{$value}px; }
  // 字体行高
  .lh-#{$value} { line-height: #{$value}px; }
  // 字体粗细
  .fw-#{$value} { font-weight: #{$value}; }
  // 间隔
  .gap-#{$value} { gap: #{$value}px; }
  // 圆角
  .round-#{$value} { border-radius: #{$value}px; }
  // top/bottom/left/right
  .top-#{$value} { top: #{$value}px; }
  .bottom-#{$value} { bottom: #{$value}px; }
  .left-#{$value} { left: #{$value}px; }
  .right-#{$value} { right: #{$value}px; }
}

// ----- 文本对齐 -----
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.font-bold { font-weight: bold; }

// ----- Flex 布局 -----
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-items-center { display: flex; align-items: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

// ----- Position 布局 -----
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-99999 { z-index: 99999; }

// ---- Border -----
.border-none { border: none; }
.border-aaa { border: 1px solid #aaa; }
.border-bbb { border: 1px solid #bbb; }
.border-ccc { border: 1px solid #ccc; }
.border-ddd { border: 1px solid #ddd; }
.border-eee { border: 1px solid #eee; }
.border-f5 { border: 1px solid #f5f5f5; }
.border-fff { border: 1px solid #fff; }

// ----- 背景颜色 -----
.bgmr {
  background: #f8fafc;
}
.bg-none { background: none; }
.bg-000 { background: #000; }
.bg-111 { background: #1f1f1f; }
.bg-222 { background: #222; }
.bg-333 { background: #333; }
.bg-444 { background: #444; }
.bg-666 { background: #666; }
.bg-888 { background: #888; }
.bg-999 { background: #999; }
.bg-aaa { background: #aaa; }
.bg-bbb { background: #bbb; }
.bg-ccc { background: #ccc; }
.bg-ddd { background: #ddd; }
.bg-eee { background: #eee; }
.bg-f5 { background: #f5f5f5; }
.bg-fff { background: #fff; }
.bg-main { background: rgba(var(--main-color), 1); }


// ---- 颜色 -----
.color-000 { color: #000; }
.color-999 { color: #999; }
.color-888 { color: #888; }
.color-666 { color: #666; }
.color-444 { color: #444; }
.color-333 { color: #333; }
.color-aaa { color: #aaa; }
.color-bbb { color: #bbb; }
.color-ccc { color: #ccc; }
.color-ddd { color: #ddd; }
.color-eee { color: #eee; }
.color-fff { color: #fff; }
.color-main { color: rgba(var(--main-color), 1); }

// ----- 宽高 -----
.w-full { width: 100%; }
.h-full { height: 100%; }
.vw100 { width: 100vw; }
.vh100 { height: 100vh; }

// ---- 显示隐藏 -----
.hidden { overflow: hidden; }
.hide { display: none; }
.over-auto { overflow: auto; }
.over-scroll { overflow: scroll; }
.over-y-auto { overflow-y: auto;}
.over-x-auto { overflow-x: auto;}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } 
.ellipsis-3 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }

// ----- 圆形 -----
.round { border-radius: 50%; }

.pointer { cursor: pointer; }
// 透明度
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }


.cover { object-fit: cover; }

// 多选样式修改
.full-area-checkbox {
    position: absolute !important;
    inset: 0 !important;
    /* 撑满整个卡片 */
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;

    /* 隐藏原生复选框框体 */
    .el-checkbox__input {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0;
        cursor: pointer !important;
    }

    .el-checkbox__label {
        display: none !important;
    }
}