@charset "utf-8";
$is_modern: 1 !default; // 兼容低版本ie
@mixin cf() {
	@if ($is_modern==0) {
		*zoom: 1;
	}
	&:before,
	&:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
		overflow: hidden;
	}
}

// inline-block
@mixin inline-block($vertical-align: middle) {
	display: inline-block;
	@if ($is_modern==0) {
		*display: inline;
		*zoom: 1;
	}
	vertical-align: #{$vertical-align}; //*vertical-align:auto;
}
@mixin ib($valign: middle) {
	@include inline-block($valign);
}

// 通用居中样式
@mixin imge($vertical-align: middle) {
	@include inline-block($vertical-align);
	font-size: 12px;
	font-size: 1rem;
	line-height: normal;
}
@mixin imgc($is_image: 1, $selecor: img, $align: center, $vertical-align: middle, $rem: 1rem) {
	font-size: 0;
	line-height: 0;
	@if ($align!=left) {
		text-align: $align;
	}
	@if ($is_modern==0) {
		&:before,
		.iecp {
			@include ib($vertical-align);
		}
		&:before,
		.iecp {
			content: "";
			height: 100%;
			font-size: 0;
			line-height: 0;
			width: 0;
		}
	} @else {
		&:before {
			@include ib($vertical-align);
		}
		&:before {
			content: "";
			height: 100%;
			font-size: 0;
			line-height: 0;
			width: 0;
		}
	}
	@if ($selecor!= "") {
		#{$selecor} {
			@if ($is_image==1) {
				@include inline-block($vertical-align);
				max-width: 100%;
				max-height: 100%; //大图片等比缩小至父元素大小
			}
			@elseif ($selecor!=img) {
				@include inline-block($vertical-align);
				font-size: 12px;
				font-size: $rem;
				line-height: normal;
			}
		}
	}
}
@mixin mln($line: 2, $lh: null) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line;
	@if ($lh) {
		height: $line * $lh;
		line-height: $lh;
	}
}
// $is_modern:1;
// .test{@include imgc($is_image:0,$align:left);}

// 单行溢出省略
@mixin sln() {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// webkit多行溢出省略
%mln {
	@include mln;
}

%cf {
	@include cf();
}
%inline-block {
	@include inline-block;
}
%ib {
	@include inline-block;
}
%imge {
	@include imge();
}
%imgc {
	@include imgc();
}
%sln {
	@include sln();
}

// .test{@extend %inline-block;}

@mixin opacity($val: 0.5) {
	opacity: $val;
	filter: alpha(opacity=$val * 100);
}

// @param
// $color - 普通的十六进制颜色值 #123456
// $alpha - 透明度0 ~ 1
@mixin background-color-rgba($color, $alpha) {
	$rgba: rgba($color, $alpha);
	$ie-hex-str: ie-hex-str($rgba);
	background-color: $rgba;
	filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr=#{$ie-hex-str},
			endColorstr=#{$ie-hex-str}
		);
	@media screen and (min-width: 0) {
		filter: none;
	}
}

@mixin background-circle($size, $color, $empty: null, $emptyColor: white, $borderWidth: 1px) {
	@include size($size);
	@include relative(null, 1);
	text-align: center;
	@media \0screen {
		&:before {
			content: ""; //*content:normal;
			@include absolute(left 0 top 0, -2);
			// *width:$size;*height:$size;
			border-left: $size dotted $color;
			border-top: $size dotted $color;
			// *border-right:$size dotted $color;
		}
		@if ($empty) {
			&:after {
				content: ""; //*content:normal;
				@include absolute(left $borderWidth top $borderWidth, -1);
				// *width:$size;*height:$size;
				border-left: ($size - $borderWidth * 2) dotted $emptyColor;
				border-top: ($size - $borderWidth * 2) dotted $emptyColor;
				// *border-right:$size dotted $color;
			}
		}
	}
	@media screen and(min-width: 0) {
		& {
			border-radius: 50%;
			@if ($empty) {
				border: $borderWidth solid $color;
				background: $emptyColor;
			} @else {
				background: $color;
			}
		}
	}
}

@mixin size($width: auto, $height: $width, $prefix: null) {
	@if $prefix and not index(min max, $prefix) {
		@warn "If there is a prefix, it must be:[min|max]`, but got:`#{$prefix}`.";
	} @else {
		$prefix: if($prefix, $prefix + "-", "");
		#{$prefix+'width'}: $width;
		#{$prefix+'height'}: $height;
	}
}

// position
// 使用：@include relative(top 1px left 1px)--->position:relative;left:1px;top:1px;
@mixin position($position, $args, $index: null) {
	position: unquote($position);
	@each $o in top right bottom left {
		$i: index($args, $o);
		@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
			#{$o}: nth($args, $i + 1);
		}
	}
	@if ($index) {
		z-index: $index;
	}
}
@mixin absolute($args: null, $index: null) {
	@include position("absolute", $args, $index);
}
@mixin fixed($args: null, $index: null) {
	@include position("fixed", $args, $index);
}
@mixin relative($args: null, $index: null) {
	@include position("relative", $args, $index);
}
// 例：
// sass
// .element {
// 	@include absolute(top 0 left 1em);
// }
// Ouput
// .element {
// 	position: absolute;
// 	top: 0;
// 	left: 1em;
// }

@mixin button($width, $height, $bgcolor: transparent, $bradius: 3px, $bgcolor2: $bgcolor) {
	@include size($width, $height);
	@include user-select(none);
	line-height: $height;
	text-align: center;
	background: $bgcolor;
	@if $bradius != 0 {
		border-radius: $bradius;
	}
	cursor: pointer;
	&:hover {
		background-color: darken($bgcolor2, 5%);
	}
	&:active {
		background-color: darken($bgcolor2, 5%);
		outline: thin dotted;
		outline-offset: -2px;
	}
}

// Returns the opposite direction of each direction in a list
// @author Hugo Giraudel
// @param {List} $directions - List of initial directions
// @return {List} - List of opposite directions
@function opposite-direction($directions) {
	$opposite-directions: ();
	$direction-map: (
		"top": "bottom",
		"right": "left",
		"bottom": "top",
		"left": "right",
		"center": "center",
		"ltr": "rtl",
		"rtl": "ltr"
	);
	@each $direction in $directions {
		$direction: to-lower-case($direction);
		@if map-has-key($direction-map, $direction) {
			$opposite-directions: append(
				$opposite-directions,
				unquote(map-get($direction-map, $direction))
			);
		} @else {
			@warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
		}
	}
	@return $opposite-directions;
}
// 例：scss
// .selector {
//   background-position: opposite-direction(top right);
// }
// css
// .selector {
//   background-position: bottom left;
// }

//生成 三角
@mixin triangle($direction, $position, $color: currentcolor, $size: 1em) {
	$direction: if(function-exists("to-lower-case") == true, to-lower-case($direction), $direction);
	@if not index(top right bottom left, $direction) {
		@warn "Direction must be one of `top`, `right`, `bottom` or `left`; currently `#{$direction}`.";
	} @else {
		// Core stuff
		@include absolute($position);
		@include size(0);
		border-#{opposite-direction($direction)}: $size solid $color;
		$perpendicular-border: $size solid transparent;
		@if $direction == top or $direction == bottom {
			border-left: $perpendicular-border;
			border-right: $perpendicular-border;
		} @else if $direction == right or $direction == left {
			border-bottom: $perpendicular-border;
			border-top: $perpendicular-border;
		}
	}
}

// 列：scss
// .selector{@include triangle(right,top 5px right -5px,#EA3434,5px);}
// css
// .selector {
// 	top: 5px;
// 	right: -5px;
// 	position: absolute;
// 	width: 0;
// 	height: 0;
// 	border-left: 5px solid #EA3434;
// 	border-bottom: 5px solid transparent;
// 	border-top: 5px solid transparent
// }

@mixin tip-box($direction, $position, $arrSize, $bgColor: white, $borderColor: black) {
	$dirMap: (
		"top": "bottom",
		"right": "left",
		"bottom": "top",
		"left": "right"
	);
	$od: map-get($dirMap, $direction); // 反方向
	$n: 1;
	@if index(right bottom, $direction) {
		$n: 2;
	}
	padding-#{$direction}: nth($arrSize, $n); // padding使用相应宽/高的值，使可以hover到tip上显示
	.tip-content {
		position: relative;
		background: $bgColor;
		border-radius: 8px;
		border: 1px solid $borderColor;
		&:before,
		&:after,
		.before,
		.after {
			@include absolute($position);
			@include size(0);
			content: "";
			border-style: solid;
			border-color: transparent;
			border-#{$od}: nth($arrSize, 1) solid $borderColor;
			@if index(top bottom, $direction) {
				border-left-width: nth($arrSize, 1);
				border-right-width: nth($arrSize, 2);
			} @else if index(left right, $direction) {
				border-top-width: nth($arrSize, 1);
				border-bottom-width: nth($arrSize, 2);
			}
		}
		&:after,
		.after {
			@include absolute($direction nth($position, index($position, $direction) + 1) + 1);
			border-#{$od}-color: $bgColor;
		}
	}
}
// .tip{
// 	@include ib;width:100px;margin-top:15px;margin-right:15px;
// 	word-break:break-line;word-wrap:break-word;
// 	@include relative(top 10px left 14px);
// 	line-height:16px;color:#ff8144;
// 	.tip-content{padding:15px;}
// 	@include tip-box(top, left 13px top -13px, 10px 10px);
// }