/**
 * 在这里写公用的class
 */
@use "./declare.scss";

// 占位符
.#{declare.$prefix}-place {
	width: 1px;
	height: 1px;
}

// 元素展示隐藏
.#{declare.$prefix}-show {
	display: initial;
}
.#{declare.$prefix}-hidden {
	 display: none !important;
}

/**
 * Flex 基础布局
 */
.#{declare.$prefix}-f-auto {
	@include declare.flex-base;
	flex: 1;
	overflow: hidden;
}
.#{declare.$prefix}-fr {
	@include declare.flex-base;
	flex-direction: row;
}
.#{declare.$prefix}-fr-end {
	@include declare.flex-base;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.#{declare.$prefix}-fr-center {
	@include declare.flex-base;
	@include declare.flex-row-center;
}
.#{declare.$prefix}-fr-center-jc {
	@include declare.flex-base;
	justify-content: center;
}
.#{declare.$prefix}-fr-center-ai {
	@include declare.flex-base;
	align-items: center;
}
.#{declare.$prefix}-fr-between {
	@include declare.flex-base;
	justify-content: space-between;
	align-items: center;
}
.#{declare.$prefix}-fr-reverse {
	@include declare.flex-base;
	flex-direction: row-reverse;
	align-items: center;
}
.#{declare.$prefix}-fc {
	@include declare.flex-base;
	flex-direction: column;
}
.#{declare.$prefix}-fc-center {
	@include declare.flex-base;
	@include declare.flex-col-center;
}

/**
 * 填充
 */
.#{declare.$prefix}-fill {
	@include declare.wh-fill;
}
.#{declare.$prefix}-full {
	@include declare.wh-full;
}
.#{declare.$prefix}-auto-w {
	width: auto;
}
.#{declare.$prefix}-fill-w {
	@include declare.width-fill;
}
.#{declare.$prefix}-fill-w-min {
	min-width: 100vw;
}
.#{declare.$prefix}-fill-w-max {
	max-width: 100vh;
}
.#{declare.$prefix}-full-w {
	@include declare.width-full;
}
.#{declare.$prefix}-full-w-min {
	min-width: 100%;
}
.#{declare.$prefix}-full-w-max {
	max-width: 100%;
}
.#{declare.$prefix}-auto-h {
	height: auto;
}
.#{declare.$prefix}-fill-h {
	@include declare.height-fill;
}
.#{declare.$prefix}-fill-h-min {
	min-height: 100vh;
}
.#{declare.$prefix}-fill-h-max {
	max-height: 100vh;
}
.#{declare.$prefix}-full-h {
	@include declare.height-full;
}
.#{declare.$prefix}-full-h-min {
	min-height: 100%;
}
.#{declare.$prefix}-full-h-max {
	max-height: 100%;
}

/**
 * 文字
 */
.#{declare.$prefix}-tc {
	@include declare.text-center;
}
.#{declare.$prefix}-tl {
	@include declare.text-left;
}
.#{declare.$prefix}-tr {
	@include declare.text-right;
}

/**
 * 鼠标
 */
.#{declare.$prefix}-c {
	cursor: default;
}
.#{declare.$prefix}-cp {
	cursor: pointer;
}
.#{declare.$prefix}-ch {
	cursor: help;
}
.#{declare.$prefix}-cm {
	cursor: move;
}

/**
 * 浮动
 */
.#{declare.$prefix}-fl {
	float: left;
}
.#{declare.$prefix}-fr {
	float: right;
}
.#{declare.$prefix}-clearfix:before,
.#{declare.$prefix}-clearfix:after {
	display: table;
	content: "";
}
.#{declare.$prefix}-clearfix:after {
	clear: both;
}

/**
 * 边距
 */
@for $i from 1 to 500 {
	// 宽高
	.#{declare.$prefix}-wh-#{$i} {
		width: #{$i}px;
		height: #{$i}px;
	}
	.#{declare.$prefix}-w-#{$i} {
		width: #{$i}px;
	}
	.#{declare.$prefix}-h-#{$i} {
		height: #{$i}px;
	}
	// 外边距
	.#{declare.$prefix}-m-#{$i} {
		margin: #{$i}px;
	}
	.#{declare.$prefix}-my-#{$i} {
		margin-top: #{$i}px;
		margin-bottom: #{$i}px;
	}
	.#{declare.$prefix}-mx-#{$i} {
		margin-left: #{$i}px;
		margin-right: #{$i}px;
	}
	.#{declare.$prefix}-mt-#{$i} {
		margin-top: #{$i}px;
	}
	.#{declare.$prefix}-mr-#{$i} {
		margin-right: #{$i}px;
	}
	.#{declare.$prefix}-mb-#{$i} {
		margin-bottom: #{$i}px;
	}
	.#{declare.$prefix}-ml-#{$i} {
		margin-left: #{$i}px;
	}
	// 内边距
	.#{declare.$prefix}-p-#{$i} {
		padding: #{$i}px;
	}
	.#{declare.$prefix}-py-#{$i} {
		padding-top: #{$i}px;
		padding-bottom: #{$i}px;
	}
	.#{declare.$prefix}-px-#{$i} {
		padding-left: #{$i}px;
		padding-right: #{$i}px;
	}
	.#{declare.$prefix}-pt-#{$i} {
		padding-top: #{$i}px;
	}
	.#{declare.$prefix}-pr-#{$i} {
		padding-right: #{$i}px;
	}
	.#{declare.$prefix}-pb-#{$i} {
		padding-bottom: #{$i}px;
	}
	.#{declare.$prefix}-pl-#{$i} {
		padding-left: #{$i}px;
	}
}

/**
 * 定位
 */
.#{declare.$prefix}-pf-t {
	position: fixed;
	top: 0;
}
.#{declare.$prefix}-pf-b {
	position: fixed;
	bottom: 0;
}
.#{declare.$prefix}-pf-l {
	position: fixed;
	left: 0;
}
.#{declare.$prefix}-pf-r {
	position: fixed;
	right: 0;
}
.#{declare.$prefix}-zi-max {
	z-index: 99999;
}
.#{declare.$prefix}-zi-min {
	z-index: -1;
}

$zindexs: (0, 5, 9, 10, 15, 19, 20, 25, 29, 30, 35, 39, 40, 45, 49, 50, 55, 59, 60, 65, 69, 70, 75, 79, 80, 85, 89, 90, 95, 99, 100);
@each $zindex in $zindexs {
	.#{declare.$prefix}-zi-#{$zindex} {
		z-index: #{$zindex};
	}
}

//@function scale-below($value, $base, $ratio: 1.618) {
//	@while $value > $base {
//		$value: math.div($value, $ratio);
//	}
//	@return $value;
//}
