// sass 混合宏（函数）

/**
* 溢出省略号
* @param {Number} 行数
*/
@mixin ellipsis($rowCount: 1) {
  @if $rowCount <= 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

/**
* 控制用户能否选中文本
* @param {String} 类型
*/
@mixin userSelect($value: none) {
  -moz-user-select: $value;
  -ms-user-select: $value;
  -webkit-user-select: $value;
  user-select: $value;
}

// 绝对定位居中
@mixin absoluteCenter() {
  position: absolute;
  inset: 0;
  margin: auto;
}

/**
* 动画 mixin（已简化，移除重复 keyframes）
* @param {Map} $from 起始属性
* @param {Map} $to 结束属性
* @param {String} $name 动画名称
*/
@mixin animation(
  $from: (
    width: 0,
  ),
  $to: (
    width: 100px,
  ),
  $name: mymove
) {
  @keyframes #{$name} {
    from {
      @each $key, $value in $from {
        #{$key}: #{$value};
      }
    }

    to {
      @each $key, $value in $to {
        #{$key}: #{$value};
      }
    }
  }
}

// 圆形盒子
@mixin circle($size: 11px, $bg: #fff) {
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  background: $bg;
  border-radius: 50%;
}

// placeholder
@mixin placeholder($color: #bbb) {
  // Firefox
  &::placeholder {
    color: $color;
    opacity: 1;
  }

  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: $color;
  }

  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: $color;
  }

  &:placeholder-shown {
    text-overflow: ellipsis;
  }
}

// 背景透明，文字不透明。兼容IE8
@mixin betterTransparentize($color, $alpha) {
  $c: rgba($color, $alpha);
  $ie_c: ie_hex_str($c);

  zoom: 1;
  background: rgba($color, 1);
  background: $c;
  background: transparent \9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
}

// 添加浏览器前缀
@mixin browserPrefix($propertyName, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
    #{$prefix}#{$propertyName}: $value;
  }
}

// 边框
@mixin border($color: red) {
  border: 1px solid $color;
}

// 背景滤镜
@mixin backdropBlur() {
  --tw-backdrop-blur: blur(30px);

  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}