@font-face {
	font-family: 'iconfont';
	src: url('./../../../src/assets/iconfont/p5-iconfont.eot');
	src: url('./../../../src/assets/iconfont/p5-iconfont.eot?v=1#iefix') format('embedded-opentype'),
		url('./../../../src/assets/iconfont/p5-iconfont.ttf?v=1') format('truetype'),
		url('./../../../src/assets/iconfont/p5-iconfont.svg?v=1#iconfont') format('svg');
}
@mixin iconfont{
	font-family: iconfont;
	font-size: 28px;
}
@mixin height{
	height: 40px;
	line-height: 40px;
}
@mixin hor-height{
	height: 60px;
	line-height: 60px;
}
@mixin transition {
	transition-property: opacity, color, background-color, border, width;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.645,.045,.355,1);
}
// ======基础部分=======
// 外框
.p5-menu {
	user-select: none;
	box-sizing: border-box;
	width: 100%;
	@include transition;
}

// 每一个项目元素
.p5-menu-item {
	cursor: pointer;
	@include transition;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.p5-menu-submenu{
	position: relative;
	box-sizing: border-box;
	z-index: 1;
	overflow: visible;
	&-tit-box{
		cursor: pointer;
		@include transition;
		white-space: nowrap;
	}
	&-arrowdown {
		@include iconfont;
		transition: transform 0.3s;
		&:after{
			content: "\e664";
		}
	}
	&-arrowup {
		transform: rotate(180deg);
	}
	&-title{
		@include height;
	}
}

// ======垂直menu=======
.p5-menu-vertical{
	.p5-menu-item {
		@include height;
		padding-left: 30px;
	}
	.p5-menu-submenu{
		&-arrowdown {
			position: absolute;
			top: 0;
			right: 20px;
			@include height;
		}
		&-title{
			padding-left: 30px;
		}
		&-list {
			display: none;
			&.isshowchild {
				display: block;
			}
		}
	}
	&:not(.p5-menu-collapsed) {
		.p5-menu-submenu{ 
			.p5-menu-item{
				padding-left: 50px;
			}
		}
	}
}

// ======水平menu=======
.p5-menu-horizontal{
	text-align: center;
	.p5-menu-ul {
		@include hor-height;
		.p5-menu-item {
			float: left;
			padding: 0 20px;
			@include hor-height;
			box-sizing: border-box;
		}
	}
	.p5-menu-submenu{
		float: left;
		padding: 0 20px;
		@include hor-height;
		border-right: none;
		&-arrowdown {
			line-height: 1;
			vertical-align: middle;
			display: inline-block;
		}
		&-list {
			position: absolute;
			top: 62px;
			z-index: 100;
			box-shadow: 0 1px 6px rgba(0,0,0,.2);
		}
		.p5-menu-item {
			float: none;
			height: auto;
			line-height: initial;
			padding: 7px 16px 8px;
			border: none;
		}
	}
	.p5-menu-active{
		transition: none;
	}
	.p5-menu-item{
		border-right: none;
	}
}

// ======主题部分=======
@mixin theme($prefix) {
	// 默认
	$bgcolor: #fff;
	$color: #111;
	$activecolor: #ff552e;
	$activebgcolor: #f7cdc4;

	@if ($prefix == 'light') {
		$bgcolor: #fff;
		$color: #111;
		$activecolor: #ff552e;
		$activebgcolor: #f7cdc4;
	} @else if ($prefix == 'dark') {
		$bgcolor: #383d4a;
		$color: #fff;
		$activecolor: #fff;
		$activebgcolor: #505563;
	}
	
	background: $bgcolor;
	color: $color;
	.p5-menu-item {
		color: $color;
		&:hover{
			color: $activecolor;
		}
	}
	.p5-menu-active{
		background: $activebgcolor;
		color: $activecolor;
	}
	.p5-menu-submenu{
		&-tit-box{
			&:hover{
				color: $activecolor;
			}
		}
		&-list {
			background: $bgcolor;
		}
	}
}
.p5-menu-theme-light{
	@include theme('light');
	$color: #ff552e;
	&.p5-menu-vertical{
		.p5-menu-active{
			border-right: 2px solid $color; 
			&.p5-menu-submenu{
				background: #fff;
				border-right: none;
			}
		}
	}
	&.p5-menu-horizontal{
		.p5-menu-active{
			background: #fff;
			border-bottom: 2px solid $color;
		}
		.p5-menu-item, .p5-menu-submenu{
			transition: none;
			&:hover {
				border-bottom: 2px solid $color;
			}
		}
		.p5-menu-submenu{
			.p5-menu-item{
				border: none;
				&:hover{
					border:none;
				}
			}
		}
		.p5-menu-ul{
			position: relative;
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 1px;
				background: #dcdee2;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
}
.p5-menu-theme-dark {
	@include theme('dark');
	.p5-menu-item, .p5-menu-submenu-tit-box {
		opacity: 0.65;
		&:hover {
			opacity: 1;
		}
	}
	.p5-menu-active {
		opacity: 1;
		&.p5-menu-submenu {
			.p5-menu-submenu-tit-box {
				opacity: 1;
			}
		}
	}
	&.p5-menu-vertical {
		.p5-menu-active {
			&.p5-menu-submenu {
				background: none;
			}
		}
		
	}
}

// 收缩起来样式
.p5-menu-collapsed {
	width: 80px;
	text-align: center;
	.p5-menu-item, .p5-menu-submenu-title{
		padding: 0;
	}
	.p5-menu-submenu-arrowdown{
		display: none;
	}
	.collapsed-menu, .p5-menu-submenu-arrowdown{
		opacity: 0;
		max-width: 0;
		display: inline-block;
		white-space: nowrap;
	}
	.p5-menu-submenu{
		position: relative;
		.p5-menu-submenu-list{
			position: absolute;
			top:0;
			right: -4px;
			transform: translateX(100%);
			border-radius: 4px;
			&:before {
				content: "";
				height: 100%;
				width: 4px;
				background: transparent;
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				transform: translateX(-100%);
			}
			.p5-menu-item{
				padding: 0 10px;
				margin: 4px 0;
			}
		}
	}
}