/* 变量清单(表) */
@import './variable.less';
/* 清除浏览器默认样式 */
@import './reset.less';
/* 兼容各个 端浏览器样式 */
@import './normalize.less';
@import './mixins.less';
@font-face {
	font-family: 'HarmonyOS';
	src: url('./font/HarmonyOS_Sans_SC_Regular.ttf');
}
* {
	box-sizing: border-box;
	font-family: 'PingFang SC', 'HarmonyOS';
}
body,
html {
	height: 100%;
	box-sizing: border-box;
	background-color: @primary-background-color;
	font-family: 'PingFang SC', 'HarmonyOS';
}

:focus {
	outline: none;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	border-radius: 15px;
}
::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
	background-color: darken(#c0c8d3, 20%);
}

/* 布局容器*/
.layout-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;

	.layout-content-wrapper {
		overflow-y: auto;

		.layout-header-wrapper {
			background-color: @white-color;
		}

		.layout-main-wrapper {
			overflow-x: hidden;

			h2.page-title {
				.mgb20;
				font-size: 20px;
				font-weight: normal;
			}
		}
	}

	.app-header-wrapper {
		.shadow;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		background-color: @white-color;
		position: relative;
		z-index: 999;
		box-sizing: border-box;

		.logo-item {
			.flex-center;
			font-size: 14px;
			color: #fff;
		}

		.collapse-icon {
			.mgl10;
			padding: 5px;

			&:hover {
				cursor: pointer;
				background-color: rgba(0, 0, 0, 0.1);
			}
		}
	}

	.app-sidebar-wrapper {
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: relative;

		.app-sidebar-header {
			width: 100%;
			height: 48px;
			box-sizing: border-box;
			color: @white-color;
			text-align: center;
			line-height: 48px;
		}

		.app-sidebar-content-wrapper {
			position: absolute;
			left: 0;
			right: 0;
			top: 48px;
			bottom: 0;
			overflow: hidden;

			.el-submenu__title {
				height: 48px;
				line-height: 48px;
			}
			.el-menu-item {
				height: 42px;
				line-height: 42px;
				padding-top: 2px;
				font-family: Source Han Sans CN;
				font-weight: 540;
			}

			.el-submenu__title:hover,
			.el-menu-item:hover,
			.el-menu-item:focus,
			.el-menu-item.is-active {
				background-color: transparent !important;
				i:nth-child(1),
				span {
					position: relative;
					z-index: 9;
				}

				.menu-background-item {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					z-index: 1;
				}
			}
		}

		.el-menu {
			border-right: none;
		}
	}
}

/*fade*/
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
	opacity: 0;
}

/*slide-fade*/
.slide-fade-enter-active {
	transition: all 0.3s ease;
}

.slide-fade-leave-active {
	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
	transform: translateX(10px);
	opacity: 0;
}

/*list过渡*/
.list-enter-active,
.list-leave-active {
	transition: all 1s;
}

.list-enter,
.list-leave-to {
	opacity: 0;
	transform: translateY(30px);
}

/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
	transition: all 0.5s;
}

.fade-transform-enter {
	opacity: 0;
	transform: translateX(-30px);
}

.fade-transform-leave-to {
	opacity: 0;
	transform: translateX(30px);
}

// el 滚动条
.custom-scrollbar.el-scrollbar {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow-x: hidden;

	.el-scrollbar__wrap {
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.el-scrollbar__bar {
		// 滚动条的高度(横)
		&.is-horizontal {
			height: 10px;
			display: none;
		}

		// 滚动条的宽度(纵)
		&.is-vertical {
			width: 10px;
			right: 0px;
		}
	}
}

// 修改 抽屉
.el-dialog__wrapper {
	overflow-x: hidden;
	overflow-y: auto;
}

.custom-drawer {
	&:focus {
		outline: none;
	}
	.el-drawer__body {
		padding: 20px 20px 20px;
		box-sizing: border-box;
		position: relative;
	}

	.drawer__content {
		position: absolute;
		left: 20px;
		top: 20px;
		right: 20px;
		bottom: 76px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.drawer__footer {
		width: 100%;
		height: 76px;
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0px;
		padding: 20px;
		box-sizing: border-box;

		.el-button {
			flex: 1;
		}

		.el-button + .el-button {
			margin-left: 10px;
		}
	}
	.el-select,
	.el-cascader {
		width: 100%;
	}
}

// 表单的增加 Item
.form-add-item {
	.el-form-item__content {
		display: flex;
	}
}

// 单行超出省略号
.single-line-ell {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.multi-line-ell {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.common-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 10px;

	.page-title {
		background-color: #fff;
		padding: 0 20px;
		height: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.page-content {
		padding: 20px;
	}

	.el-card + .el-card {
		margin-top: 20px;
	}

	.custom-el-tabs {
		width: 100%;
		.el-tabs__header {
			margin: 0;
			padding: 0 20px;
			box-sizing: border-box;
			background-color: #fff;
		}
		.el-tabs--left {
			.el-tabs__header {
				border-radius: 4px;
				border: 1px solid #ebeef5;
			}
		}
	}
}

// 表格的折叠
.custom-table-expand {
	font-size: 0;
	label {
		color: #99a9bf;
	}
	.el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
	&.col-3 {
		.el-form-item {
			margin-right: 0;
			margin-bottom: 0;
			width: 33.33%;
		}
	}
	&.col-4 {
		.el-form-item {
			margin-right: 0;
			margin-bottom: 0;
			width: 25%;
		}
	}
}

.el-form.search-form {
	.el-form-item {
		margin-bottom: 0 !important;
	}
}
.el-form-margin {
	.el-form-item {
		margin-bottom: 0;
		margin-top: 10px;
	}
}

.view-title {
	background-color: #fff;
	height: 48px;
	padding: 0 20px;
	border-bottom: 1px solid #dcdfe6;
	line-height: 48px;
	color: #555555;
	font-family: Source Han Sans CN;
	font-weight: 540;
}

.custom-dropdown {
	padding: 0 !important;
	.el-dropdown-menu__item {
		padding: 0 22px !important;
		text-align: center;
		border-bottom: 1px solid #dcdfeb;
	}
	.el-scrollbar {
		overflow: auto;
	}
}
.custom-date {
	.el-input__inner {
		padding: 0;
		background: #eaf0fb;
		border-radius: 4px;
		color: #1b74eb;
		text-align: center;
		height: 100%;
		border: 0;
	}
	.el-input__prefix {
		display: none;
	}
}
.custom-radio {
	.el-radio-button__inner {
		padding: 6px 25px;
	}
	.el-radio-button__orig-radio {
		&:checked + .el-radio-button__inner {
			background-color: #1b74eb;
			border-color: #1b74eb;
			box-shadow: -1px 0 0 0 #1b74eb;
		}
	}
}
.custom-header-form {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	.el-form-item {
		&:last-child {
			margin-right: 0;
		}
	}
	.el-button {
		display: flex;
		align-items: center;
		i {
			font-size: 16px;
			margin-right: 4px;
		}
	}
}
.el-table {
	border-radius: 6px 6px 6px 6px;
	.el-table__empty-text {
		img {
			width: 208px;
		}
	}

	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			background-color: #dee6ee;

			.cell {
				font-weight: 500;
				color: @text-color;

				//font-size: 16px;
				.caret-wrapper {
					height: auto;
					vertical-align: initial;

					.ascending {
						top: -18px;
					}

					.descending {
						bottom: -6px;
					}
				}
			}
		}
	}

	.el-table__body-wrapper {
		.cell {
			font-weight: 500;
			color: #6e7f8e;
			font-size: 14px;
		}
	}

	.el-table__expand-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		background-color: #f2f5f9;
	}
}
.custom-alert {
	background-color: #fff !important;
	color: #1d2129 !important;
	border-bottom: 1px solid #c0c8d3;
	.el-alert__icon {
		color: #1b74eb;
	}
}
// .el-dialog {
// 	border-radius: 6px;

// 	.el-dialog__header {
// 		padding: 30px 30px 20px 20px;

// 		.el-dialog__title {
// 			color: @text-color;
// 			font-weight: bold;
// 			font-size: 24px;
// 		}

// 		.el-dialog__headerbtn {
// 			top: 30px;
// 			right: 30px;

// 			.el-icon-close {
// 				font-family: iconfont !important;
// 				font-size: 24px;
// 				color: #606266;

// 				&:before {
// 					content: '\e65c';
// 				}
// 			}
// 		}
// 	}
// }