@use 'sass:list';
@use 'sass:map';
@use 'vars' as *;

$namespace: 'u' !default;

/** flex布局 */
@mixin flex($display: flex, $justify: flex-start, $align: center, $wrap: nowrap) {
  display: $display;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

@mixin size {
  @each $size in $sizes {
    &--#{$size} {
      @content ($size);
    }
  }
}

@mixin b($blocks...) {
  @each $block in $blocks {
    .#{$namespace}-#{$block} {
      @content;
    }
  }
}

@mixin e($elements...) {
  $selector-list: null;

  @each $element in $elements {
    @if ($selector-list != null) {
      $selector-list: #{$selector-list} + ', &__' + #{$element};
    } @else {
      $selector-list: '&__' + #{$element};
    }
  }

  #{$selector-list} {
    @content;
  }
}

@mixin m($modifiers...) {
  $selector-list: null;

  @each $modifier in $modifiers {
    @if ($selector-list != null) {
      $selector-list: #{$selector-list} + ', &--' + #{$modifier};
    } @else {
      $selector-list: '&--' + #{$modifier};
    }
  }

  #{$selector-list} {
    @content;
  }
}

@mixin em($element, $modifier) {
  $selector: '&__' + #{$element} + '--' + $modifier;
  #{$selector} {
    @content;
  }
}

@mixin is($types...) {
  @each $type in $types {
    &.is-#{$type} {
      @content;
    }
  }
}

@mixin is-not($types...) {
  $selector: '&';

  @each $type in $types {
    $selector: '#{$selector}:not(.is-#{$type})';
  }

  #{$selector} {
    @content;
  }
}

@mixin bem($b, $e: null, $m: null) {
  $b: '.' + $namespace + '-' + $b;

  @if ($e != null) {
    @each $ei in $e {
      @if ($m != null) {
        @each $mi in $m {
          #{$b + '__' + $ei + '--' + $mi} {
            @content;
          }
        }
      } @else {
        #{$b + '__' + $ei} {
          @content;
        }
      }
    }
  } @else {
    #{$b} {
      @content;
    }
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
* 设置css变量
* 参数1:变量前缀
* 参数2: 一个由值组成的列表或者由key, value组成的map
* css-var(height, (
*   large: 40px
*   default: 32px
*   small: 24px
* ))
* 生成的css变量:
* --u-height-large: 40px;
* --u-height-default: 32px;
* --u-height-small: 24px;
*/
@mixin css-var($prefix, $list) {
  @each $type, $value in $list {
    @if $value == null {
      --#{$prefix}: #{$type};
    } @else {
      // "" + $type用于消除警告
      --#{$prefix}-#{"" + $type}: #{$value};
    }
  }
}

@function breakpoint($point) {
  @return var(--#{$namespace}-breakpoint-#{$point});
}

/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
@mixin dark {
  html[data-theme='dark'] & {
    @content;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme='light']) & {
      @content;
    }
  }
}

@mixin xs {
  @media screen and (min-width: 0) and (max-width: breakpoint(xs)) {
    @content;
  }
}

@mixin sm {
  @media screen and (min-width: breakpoint(xs)) and (max-width: breakpoint(sm)) {
    @content;
  }
}

@mixin md {
  @media screen and (min-width: breakpoint(sm)) and (max-width: breakpoint(md)) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: breakpoint(md)) and (max-width: breakpoint(lg)) {
    @content;
  }
}

@mixin xl {
  @media screen and (min-width: breakpoint(lg)) {
    @content;
  }
}