/**
 * @date: 2024/1/16
 * @author: 小红
 * @fileName: utilities
 * @Description: 工具
 */

$w-sm: 640px;
$w-md: 768px;
$w-lg: 1024px;
$w-xl: 1280px;
$w-2xl: 1536px;

/**
变量
 */
@mixin useThemeVar($vars) {
  @at-root  html {
    &[data-color-scheme='light'] {
      @each $key, $value in $vars {
        --#{$key}: #{nth($value,1)};
      }
    }

    &[data-color-scheme='dark'] {
      @each $key, $value in $vars {
        --#{$key}: #{nth($value,2)};
      }
    }
  }
}


//$size 表示最大最小
@mixin useResponsive($width,$level:'&',$size:max) {
  $unit: #{$size}-width;

  $maps: (
    '&':&, // 子级 不带 #
    '#&':#Butterfly#{&}, // 带 #
    '# &':#Butterfly &, // 子级 不带 #
  );

  $selector: map-get($maps, $level);

  @at-root  #{$selector} {
    @media ($unit: $width) {
      @content;
    }
  }

}


//居中
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 1行文字省略号
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin wh100 {
  width: 100%;
  height: 100%;
}


@mixin text-clamp($clamp:1) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
}

