//通用阴影
@mixin shadowBox($type:0) {
  @if $type==0 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  } @else if $type==1 {
    box-shadow: 5px 5px 15px 2px rgba(0, 0, 0, 0.021), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }

}

//单行文字截取
@mixin single-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//多行文字截取
@mixin multi-text($multiType:2) {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
  display: -webkit-box;
  -webkit-line-clamp: $multiType;
  -webkit-box-orient: vertical;
}

//禁止文字选择
@mixin txtSelectNone {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

//清浮动
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

//按比例自适应块
@mixin scale-block($padding-Bottom:1) {
  width: 100%;
  height: 0;
  padding-bottom: $padding-Bottom;
  background-size: cover;
  background: no-repeat center center;
  display: block;
}

//圆角
@mixin radius($radius-val:50%) {
  -moz-border-radius: $radius-val;
  -webkit-border-radius: $radius-val;
  border-radius: $radius-val;
}

//flex can i use 测试
//ie ie10，11部分支持，需加-ms-
//firefox chrome opera 支持
//ios支持
//Android 4.1,4.4支持2009的-webkit-的语法 4.4以上完全支持

//flex2009不支持换行,如特定个数换行，可以做数据分割

@mixin flex-display {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($v:1) {
  -webkit-box-flex: $v;
  -webkit-flex: $v;
  flex: $v;
  width: 100%;
}

//确定子元素的排列方向方向flex-direction
//row | row-reverse | column | column-reverse;
//默认row
@mixin flex-direction($dirType:row) {
  @if $dirType==column {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
  } @else if $dirType==row-reverse {
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  } @else if $dirType==column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  } @else {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}

//水平位置justify-content
//flex-start | flex-end | center | space-between |
//默认flex-start
@mixin flex-justify-content($justifyType:flex-start) {
  @if $justifyType==flex-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  } @else if $justifyType==center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  } @else if $justifyType==space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  } @else {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}

//垂直方向align-items
//flex-start：交叉轴的起点对齐。
//flex-end：交叉轴的终点对齐。
//center：交叉轴的中点对齐。
//baseline: 项目的第一行文字的基线对齐。
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
//默认flex-start
@mixin flex-align-items($alignType:flex-start) {
  @if $alignType==flex-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
  } @else if $alignType==center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  } @else if $alignType==baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
  } @else if $alignType==stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  } @else {
    -webkit-box-align: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}

@mixin flex-order($order:0) {
  -webkit-box-ordinal-group: $order;
  order: $order;
}

//水平，垂直方向居中
@mixin flex-center() {
  @include flex-display;
  @include flex-justify-content(center);
  @include flex-align-items(center);
}

//按钮
//修改参数有两种办法：1.传送参数；2.在引用的scss里后续覆盖相应属性
@mixin button($boc:$main1,$bac:$main1,$c:$white,$hboc:$main1,$hbac:$main2,$hc:$white,$dboc:$grayLight,$dbac:$grayBrighten,$dc:$grey) {
  width: 100px; height: 30px; border-width: 2px; border-style: solid; border-color: $boc; @include flex-center; cursor: pointer; background-color: $bac; color: $c;
  &:hover{border-color: $hboc; background-color: $hbac; color: $hc;}
  &.disabled{cursor: no-drop; border-color: $dboc; background-color: $dbac; color: $dc;}
}


/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

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

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}