/* https://www.sassmeister.com/ 测试函数之类的*/
@import "function";

@mixin scrollBar {
  $--scrollbar-thumb-background: rgba(144, 147, 153, 0.3);
  &::-webkit-scrollbar {
    width: 10px;
    z-index: 11;
    &-thumb {
      background-color: $--scrollbar-thumb-background;
      border-radius: 10px;
      transition: background-color 0.3s;
      &:hover {
        background: rgba(144, 147, 153, 0.5);
      }
    }
    &-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }
    &-corner {
      background: $--scrollbar-thumb-background;
    }
  }
}

@mixin v-deep {
  ::v-deep {
    @content;
  }
}

@mixin prefix($attr) {
  &::-webkit-#{$attr},
  &::-moz-#{$attr},
  &::-ms-#{$attr} {
    @content;
  }
}
/* Placeholder
 -------------------------- */
 @mixin placeholder {
  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder {
    @content;
  }
}

/* BEM
 -------------------------- */

@mixin b($block) {
  $B: $namespace+'-'+$block !global; // !global 暴露成全局变量

  .#{$B} {
    @content;
  }
}
// 依赖B，没有形成不了class
@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }
  // 如果选择器包含了 [--、 :、:]其中一种
  @if hitAllSpecialNestRule($selector) {
    // @at-root 作为根级别class
    @at-root {
      // 加上父级选择器
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

// 依赖父元素，因为有&
@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

// 可配置m， 第二个参数如果有值，会将第二个值插入到m连接符与$B中间
@mixin configurable-m($modifier, $E-flag: false) {
  $selector: &;
  $interpolation: '';

  @if $E-flag {
    $interpolation: $element-separator + $E-flag;
  }

  @at-root {
    #{$selector} {
      .#{$B+$interpolation+$modifier-separator+$modifier} {
        @content;
      }
    }
  }
}

@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
      @content;
    }
  }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
  $selector: &;
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{$selector} {
      .#{$block+$element-separator+$element+$modifierCombo} {
        @content;
      }
    }
  }
}

@mixin when($state) {
  @at-root {
    // $state-prefix 在config里， is-前缀
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

// 元素加伪类
@mixin pseudo($pseudo) {
  @at-root #{&}#{':#{$pseudo}'} {
    @content;
  }
}