@use 'sass:meta';
@use 'sass:math';
@use "../functions/index" as fi;


$unitb: px !default;

@mixin common-bg-linear($angle: to bottom, $start: #fff, $end: #000) {
	background: $end;
	background-image: linear-gradient($angle, $start, $end);
}

/**
 * 水平垂直居中
 */

@mixin common-flex-cc {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

/**
 * 水平垂直居中
 */

@mixin common-flex {
	display: flex;
	box-sizing: border-box;
}

/**
 * 文字相关
 */

/**
  * 单词换行
  */
@mixin common-break {
	word-break: break-all;
	text-wrap: wrap;
	overflow-wrap: break-word;
	white-space: break-spaces;
}

/**
 * 一行文字
 */
@mixin common-ellipsis {
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin common-text-line($line) {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line;

	@include common-break;
}

/**
 * [common-clear-fix 清除浮动]
 * @return {[type]} [description]
 */
@mixin common-clear-fix($content: false) {
	zoom: 1;

	&::before,
	&::after {
		display: block; // 父类为flex, 使用table无法撑开
		clear: both;
		content: " ";

		@if $content {
			@content;
		} @else {
			height: 0;
			font-size: 0;
			visibility: hidden;
		}
	}
}

@mixin common-scroll($size: 4) {
	/**
	 * scrollbar width
	 */
	&::-webkit-scrollbar {
		/**
		 * 很有影响
		 */
		width: fi.unitfix($size);
	}

	&::-webkit-scrollbar:horizontal {
		height: fi.unitfix($size);
	}

	/**
	 * scrollbar bg
	 */
	&::-webkit-scrollbar-track {
		background: rgb(0 0 0 / 0%);
		border-radius: fi.unitfix(5);
		box-shadow: inset 0 0 10px rgb(0 0 0 / 0%);
	}

	/**
	 * Handle
	 */
	&::-webkit-scrollbar-thumb {
		background: rgb(0 0 0 / 20%);
		border-radius: fi.unitfix(5);
	}
}

/**
 * 1px
 * 已为父元素添加position: relative;
 * 其他只操作before和after;
 * 暂时不抽离公用
 */
@mixin common-border-1px($direction: '', $color, $border-radius: inherit) {
	position: relative;
	transform: translateZ(0);

	& {
		&::before,
		&::after {
			position: absolute;
			z-index: 1; /* 层级应高于其他元素, 否则描边会被遮挡 */
			display: block; /* 父类为flex, 使用table无法撑开 */
			clear: both;
			pointer-events: none;
			border-radius: if(sass(meta.type-of($border-radius) == "number"): fi.unitfix($border-radius); else: inherit);
			content: " ";
			box-sizing: border-box;
		}

		@if $direction == 'top' {
			&::before {
				top: 0;
				left: 0;
				width: 100%;
				border-top: fi.unitfix(1) solid $color;
				transform-origin: 0 top;
			}
		} @else if $direction == 'right' {
			&::after {
				top: 0;
				right: 0;
				height: 100%;
				border-right: fi.unitfix(1) solid $color;
				transform-origin: right 0;
			}
		} @else if $direction == 'bottom' {
			&::after {
				bottom: 0;
				left: 0;
				width: 100%;
				border-bottom: fi.unitfix(1) solid $color;
				transform-origin: 0 bottom;
			}
		} @else if $direction == 'left' {
			&::before {
				top: 0;
				left: 0;
				height: 100%;
				border-left: fi.unitfix(1) solid $color;
				transform-origin: left 0;
			}
		} @else {
			&::after {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border: fi.unitfix(1) solid $color;
				transform-origin: 0 0;
			}
		}
	}

	@media (resolution >= 2dppx) {
		& {
			@if  meta.type-of($border-radius) == 'number' {
				&::before,
				&::after {
					border-radius: fi.unitfix($border-radius * 2);
				}
			}

			@if $direction == 'top' {
				&::before {
					width: 200%;
					transform: scale(0.5);
				}
			} @else if $direction == 'right' {
				&::after {
					height: 200%;
					transform: scale(0.5);
				}
			} @else if $direction == 'bottom' {
				&::after {
					width: 200%;
					transform: scale(0.5);
				}
			} @else if $direction == 'left' {
				&::before {
					height: 200%;
					transform: scale(0.5);
				}
			} @else {
				&::after {
					width: 200%;
					height: 200%;
					transform: scale(0.5);
				}
			}
		}
	}

	@media (resolution >= 3dppx) {
		& {
			@if  meta.type-of($border-radius) == 'number' {
				&::before,
				&::after {
					border-radius: fi.unitfix($border-radius * 3);
				}
			}

			@if $direction == 'top' {
				&::before {
					width: 300%;
					transform: scale(math.div(1, 3));
				}
			} @else if $direction == 'right' {
				&::after {
					height: 300%;
					transform: scale(math.div(1, 3));
				}
			} @else if $direction == 'bottom' {
				&::after {
					width: 300%;
					transform: scale(math.div(1, 3));
				}
			} @else if $direction == 'left' {
				&::before {
					height: 300%;
					transform: scale(math.div(1, 3));
				}
			} @else {
				&::after {
					width: 300%;
					height: 300%;
					transform: scale(math.div(1, 3));
				}
			}
		}
	}
}