@use 'sass:meta';
@use 'sass:string';

// 智能背景mixin - 根据值类型自动判断使用color还是image
@mixin smart-background($value, $fallback-color: #fff) {
  // 如果值为空或无效，使用fallback颜色
  @if $value == null or $value == '' {
    background-color: $fallback-color;
  } @else if meta.type-of($value) == string {
    // 检查是否是CSS变量表达式
    @if string.index($value, 'var(') {
      // 是CSS变量，添加图片属性以支持图片显示
      // 对纯色无影响，但保证图片能正确显示
      background: #{$value};
      background-size: 100% auto;
      background-position: center top;
      background-repeat: no-repeat;
    } @else if string.index($value, '.png') or
      string.index($value, '.jpg') or
      string.index($value, '.jpeg') or
      string.index($value, '.webp') or
      string.index($value, 'data:image') or
      string.index($value, 'https://') or
      string.index($value, 'url(') {
      // 直接的图片URL，添加图片属性
      background: #{$value};
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border: 0;
    } @else {
      // 纯色值，只设置background
      background: #{$value};
    }
  } @else {
    // 非字符串类型，直接作为颜色使用
    background-color: $value;
  }
}

/*
 * 使用方法：
 * 
 * CSS变量背景 - 支持运行时动态切换图片/颜色
 * $my-bg-var: var(--my-bg-color, #f5f5f5);
 * .element {
 *   @include smart-background($my-bg-var);
 * }
 * 
 * 然后在CSS中动态设置：
 * .element {
 *   --my-bg-color: #ff0000;        // 颜色
 *   --my-bg-color: url(image.png); // 图片
 * }
 * 
 */