/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */
@import 'uview-ui/theme.scss';

@mixin flex-just($x: center, $y: center, $dirt: row){
	display: flex;
	flex-direction: $dirt;
	justify-content: $x;
	align-items: $y;
}

@mixin container($pad: 30rpx) {
	width: 100%;
	box-sizing: border-box;
	padding: 0 $pad;
}

	
@mixin text-break {
	word-break:break-all;
	word-wrap:break-word;
}

@mixin text-ellipsis {
	@include text-break();
	@include text-ellipsis-line(1);
}

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

@mixin safe-area-inset-bottom {
	padding-bottom: 0;  
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);  
}

// 间距

@for $i from 0 through 80 {
	@if $i % 2 == 0 {
		.ma-#{$i} {
			margin: $i + rpx;
		}
	
		.pa-#{$i} {
			padding: $i + rpx;
		}
	
		.mx-#{$i} {
			margin-left: $i + rpx;
			margin-right: $i + rpx;
		}
	
		.px-#{$i} {
			padding-left: $i + rpx;
			padding-right: $i + rpx;
		}
		.my-#{$i} {
			margin-top: $i + rpx;
			margin-bottom: $i + rpx;
		}
	
		.py-#{$i} {
			padding-top: $i + rpx;
			padding-bottom: $i + rpx;
		}
	
		@each $short, $long in l left, t top, r right, b bottom {
			.m#{$short}-#{$i} {
				margin-#{$long}: $i + rpx;
			}
		
			.p#{$short}-#{$i} {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-auto {
  margin-bottom: auto;
}

@for $i from 12 through 80 {
	@if $i % 2 == 0 {
		.font-#{$i} {
			font-size: $i + rpx;
		}
	}
}

// Flex布局

.d-flex {
	display: flex;
}
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-baseline {
  align-items: baseline;
}

.align-stretch {
  align-items: stretch;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

// 自定义样式类
.p-rela {
	position: relative;
}

.p-abso {
	position: absolute;
}

.p-fixed {
	position: fixed;
}

.container {
	width: 100%;
	box-sizing: border-box;
}

.text-break {
	word-break: break-all;
	word-wrap: break-word;
}

.text-center {
	text-align: center;
}

.reset-button {
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

.reset-button::after {
   border: none;
}

.font-bold {
	font-weight: bold;
}