/**
 * 混合宏
 */
@import 'config';
@import 'function';
/**
  * BEM，定义块（b)
  */
@mixin b($block) {
  $B: $namespace + '-' + $block !global;

  .#{$B} {
    @content;
  }
}
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin e($element...) {
  $selector: &;
  $selectors: '';

  @if containsPseudo($selector) {
    @each $item in $element {
      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
    }

    @at-root {
      #{$selector} {
        #{$selectors} {
          @content;
        }
      }
    }
  } @else {
    @each $item in $element {
      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
    }

    @at-root {
      #{$selectors} {
        @content;
      }
    }
  }
}
/* 此方法用于生成穿透样式 */
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin edeep($element...) {
  $selector: &;
  $selectors: '';

  @if containsPseudo($selector) {
    @each $item in $element {
      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
    }

    @at-root {
      #{$selector} {
        :deep() {
          #{$selectors} {
            @content;
          }
        }
      }
    }
  } @else {
    @each $item in $element {
      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
    }

    @at-root {
      :deep() {
        #{$selectors} {
          @content;
        }
      }
    }
  }
}
/* 定义状态（m） */
@mixin m($modifier...) {
  $selectors: '';

  @each $item in $modifier {
    $selectors: #{$selectors + & + $modifierSeparator + $item + ','};
  }

  @at-root {
    #{$selectors} {
      @content;
    }
  }
}
/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
@mixin me($element...) {
  $selector: &;
  $selectors: '';

  @if containsModifier($selector) {
    @each $item in $element {
      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
    }

    @at-root {
      #{$selector} {
        #{$selectors} {
          @content;
        }
      }
    }
  } @else {
    @each $item in $element {
      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
    }

    @at-root {
      #{$selectors} {
        @content;
      }
    }
  }
}
/* 状态，生成 is-$state 类名 */
@mixin when($states...) {
  @at-root {
    @each $state in $states {
      &.#{$state-prefix + $state} {
        @content;
      }
    }
  }
}
/**
  * 常用混合宏
  */
/* 单行超出隐藏 */
@mixin lineEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 多行超出隐藏 */
@mixin multiEllipsis($lineNumber: 3) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lineNumber;
  overflow: hidden;
}
/* 清除浮动 */
@mixin clearFloat {
  &::after {
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    visibility: hidden;
    content: '';
  }
}
/* 0.5px 边框 指定方向*/
@mixin halfPixelBorder($direction: 'bottom', $left: 0, $color: $-color-border-light) {
  position: relative;

  &::after {
    position: absolute;
    left: $left;
    display: block;

    height: 1px;
    content: '';
    background: $color;

    transform: scaleY(0.5);

    @if ($left==0) {
      width: 100%;
    } @else {
      width: calc(100% - #{$left});
    }

    @if ($direction== 'bottom') {
      bottom: 0;
    } @else {
      top: 0;
    }
  }
}
/* 0.5px 边框 环绕 */
@mixin halfPixelBorderSurround($color: $-color-border-light) {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: 200%;
    height: 200%;
    pointer-events: none;
    content: ' ';
    border: 1px solid $color;
    transform: scale(0.5);
    transform-origin: left top;
  }
}

@mixin buttonClear {
  -webkit-appearance: none;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/**
  * 三角形实现尖角样式，适用于背景透明情况
  * @param $size 三角形高，底边为 $size * 2
  * @param $bg 三角形背景颜色
  */
@mixin triangleArrow($size, $bg) {
  @include e(arrow) {
    position: absolute;
    width: 0;
    height: 0;
  }

  @include e(arrow-down) {
    bottom: calc(-1 * $size);
    border-top: $size solid $bg;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
    transform: translateX(-50%);
  }

  @include e(arrow-up) {
    top: calc(-1 * $size);
    border-right: $size solid transparent;
    border-bottom: $size solid $bg;
    border-left: $size solid transparent;
    transform: translateX(-50%);
  }

  @include e(arrow-left) {
    left: calc(-1 * $size);
    border-top: $size solid transparent;
    border-right: $size solid $bg;
    border-bottom: $size solid transparent;
    transform: translateY(-50%);
  }

  @include e(arrow-right) {
    right: calc(-1 * $size);
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $bg;
    transform: translateY(-50%);
  }
}
/**
  * 正方形实现尖角样式，适用于背景不透明情况
  * @param $size 正方形边长
  * @param $bg 正方形背景颜色
  * @param $z-index z-index属性值，不得大于外部包裹器
  * @param $box-shadow 阴影
*/
@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
  @include e(arrow) {
    position: absolute;
    z-index: $z-index;
    width: $size;
    height: $size;
  }

  @include e(arrow-down) {
    bottom: 0;
    transform: translateX(-50%);

    &:after {
      position: absolute;
      bottom: calc(-1 * $size / 2);
      left: 0;
      width: $size;
      height: $size;
      content: '';
      background-color: $bg;
      box-shadow: $box-shadow;
      transform: rotateZ(45deg);
    }
  }

  @include e(arrow-up) {
    top: 0;
    transform: translateX(-50%);

    &:after {
      position: absolute;
      top: calc(-1 * $size / 2);
      left: 0;
      width: $size;
      height: $size;
      content: '';
      background-color: $bg;
      box-shadow: $box-shadow;
      transform: rotateZ(45deg);
    }
  }

  @include e(arrow-left) {
    left: 0;
    transform: translateY(-50%);

    &:after {
      position: absolute;
      top: 0;
      left: calc(-1 * $size / 2);
      width: $size;
      height: $size;
      content: '';
      background-color: $bg;
      box-shadow: $box-shadow;
      transform: rotateZ(45deg);
    }
  }

  @include e(arrow-right) {
    right: 0;
    transform: translateY(-50%);

    &:after {
      position: absolute;
      top: 0;
      right: calc(-1 * $size / 2);
      width: $size;
      height: $size;
      content: '';
      background-color: $bg;
      box-shadow: $box-shadow;
      transform: rotateZ(45deg);
    }
  }
}