@import "var";

$element-separator: '__';
$modifier-separator: '--';

@mixin b($block) {
    .#{$block} {
        @content;
    }
}

@mixin e($element) {
    $selector: &;
    @at-root {
        #{$selector + $element-separator + $element} {
            @content;
        }
    }
}

@mixin m($modifier) {
    $selector: &;
    @at-root {
        #{$selector + $modifier-separator + $modifier} {
            @content;
        }
    }
}


%ps{
    position: sticky;
}

%boxs{
    box-shadow: 0 0 j(5) j(5) rgba(0,0,0,.05);
}

%bg{
    background-size: j(1000);
}

%fs0{
    font-size: 0;
}

%oya{
    @extend %ost;
    overflow-x: hidden;
    overflow-y: auto;
}

%ost{
    // 改属性会导致z-index 失效
    // 具体情况下具体使用
    -webkit-overflow-scrolling: touch;
}

%w100{
    width: 100%;
}

%h100{
    height: 100%;
}

%t50{
    top: 50%;
}

%l50{
    left: 50%;
}

%l0{
    left: 0;
}

%r0{
    right: 0;
}

%b0{
    bottom: 0;
}

%t0{
    top: 0;
}

%jcc{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

%fww{
    -webkit-flex-wrap:wrap;
    -webkit-box-lines:multiple;
    -moz-flex-wrap:wrap;
    flex-wrap:wrap;
}

%jcs{
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}

%jce{
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}


%fdc{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;
}

%aic{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
%aie{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

%bsb{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

%df{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

%df1{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
    //width:0%
}

%dfn{
    -webkit-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    //width:0%
}

%pr{
	position:relative;
}

%pa{
	position:absolute;
}

%thc0{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

%pf{
  position:fixed;
}

%dib{
	display:inline-block;
}

%db{
	display:block;
}

%dn{
	display:none;
}

%of{
	overflow:hidden;
	zoom:1;
}

%vam{
	vertical-align:middle;
}

%bn{
	border:none 0;
}

%fnone{
	line-height:800px;
	@extend %oh;
}

%tint{
	text-indent:-999em;
	@extend %oh;
}

%clearfix{
	zoom:1;
}

%clearfix:after{
	content:'\20';
	display:block;
	height:0;
	clear:both;
}

%fl{
	float:left;
}

%fr{
	float:right;
}

%ma{
	margin:0 auto;
}

%oh{
	overflow:hidden;
}

%tac{
	text-align:center;
}

%tar{
	text-align:right;
}

%wryh{
	font-family:\5FAE\8F6F\96C5\9ED1;
}

%tahoma{
	font-family:tahoma;
}

%fwb{
	font-weight:bold;
}

%fwn{
	font-weight:normal;
}

%cp{
	cursor:pointer;
}

%ao8{
   &:active{
       opacity: .8;
   }
}

%usn{
    user-select: none;
}

%tdn{
  text-decoration:none
}

%tdu{
  text-decoration:underline;
}

%f12{
	font-size:12px;
}

%f14{
	font-size:14px;
}

%f16{
	font-size:16px;
}

%f18{
	font-size:18px;
}

%f20{
	font-size:20px;
}

%f22{
	font-size:22px;
}

%cfff{
	color:#fff;
}

%c3{
	color:#333;
}

%cc{
	color:#ccc;
}

%c6{
	color:#666;
}

%c9{
	color:#999;
}

%bgwhite{
	background:#fff;
}

%twno{
    @extend %oh;
    text-overflow: ellipsis;
    white-space: nowrap;
}

%br50{
    border-radius: 50%;
}

@mixin twno($n){
    word-break: break-all;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
}

@mixin rounded($radius){
    -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin rounded($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

@mixin br($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

@mixin tfr($rotate){
    -webkit-transform: rotate($rotate);
    -moz-transform: rotate($rotate);
    -ms-transform: rotate($rotate);
    -o-transform: rotate($rotate);
    transform: rotate($rotate);
}

@mixin tft($translate3d){
    -webkit-transform: $translate3d;
    -moz-transform: $translate3d;
    -ms-transform: $translate3d;
    -o-transform: $translate3d;
    transform: $translate3d;
}

@mixin tfo($x, $y) {
    -webkit-transform-origin: $x $y;
    -moz-transform-origin: $x $y;
    -ms-transform-origin: $x $y;
    -o-transform-origin: $x $y;
    transform-origin: $x $y;
}

@mixin tst($sty,$time){
    -webkit-transition: $sty $time;
    -moz-transition: $sty $time;
    -o-transition: $sty $time;
    transition: $sty $time;
}

@mixin tst2($sty,$time,$sty2,$time2){
    -webkit-transition: $sty $time, $sty2 $time2;
    -moz-transition: $sty $time, $sty2 $time2;
    -o-transition: $sty $time, $sty2 $time2;
    transition: $sty $time, $sty2 $time2;
}

@mixin bosh($x,$y,$m,$n,$rgba){
    -webkit-box-shadow: $x $y $m $n $rgba;
    -moz-box-shadow: $x $y $m $n $rgba;
    -o-box-shadow: $x $y $m $n $rgba;
    box-shadow: $x $y $m $n $rgba;
}


%b05{
    @extend %pr;
    &:before{
        @extend %pa;
        @extend %t0;
        @extend %l0;
        @extend %bsb;
        @include tft(scale(0.5, 0.5));
        @include tfo(0, 0);
        z-index: 0;
        content: '';
        width: 200%;
        height: 200%;
        pointer-events: none;
    }
}

%bt{
    &:before{
        border-top: 1px solid #ddd;
    }
}

%br{
    &:before{
        border-right: 1px solid #ddd;
    }
}

%bb{
    &:before{
        border-bottom: 1px solid #ddd;
    }
}

%bl{
    &:before{
        border-left: 1px solid #ddd;
    }
}

%bw05{
    @extend %pr;
    &:after,
    &:before{
        pointer-events: none;
    }
}

%bwbn{
    &:after{
        @extend %dn;
    }
}
%bwtn{
    &:before{
        @extend %dn;
    }
}

%bwt{
    &:before{
        @extend %pa;
        @extend %t0;
        @extend %l0;
        @extend %r0;
        content: '';
        height: 1px;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
    }
}
%bwb{
    &:after{
        @extend %pa;
        @extend %b0;
        @extend %l0;
        @extend %r0;
        content: '';
        height: 1px;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
    }
}

@mixin bw05r($px){
    &:before{
        border-radius: $px;
    }
}

%bw05r{
    &:before{
        border-radius: 50%;
    }
}