@import "./flex-box";

.@{prefix}{

	&menu-horizon{
		display: flex;
		justify-content:space-around;
		//border-top:1px @line-color solid;
	}

	&menu-horizon-item{
		flex:1;
		cursor: pointer;
		text-align: center;
		position: relative;
	 	background: none;
		border:0;

		&>span{
			display: block;
		}


		.menu-pic{
			margin: 0 auto;
			text-align: center;
			width:2em;
			//height:1.2em;
			line-height: 1.2em;
			font-size: 1.3*@font-size-lg;
			display: block;
			img{
				width: 1.6em;
		    height: 1.6em;
		    //border-radius: .8em;
			}
		}

		.menu-title{
			text-align: center;
			padding:@r*3px 0;
			font-size: @font-size-sm;
			display: block;
		}

		.tip{
			position: absolute;
			top:0px;
			left: 50%;
			margin-left:10px;
			background: @color-highlight;
			color:#fff;
			padding:0 @r*4px;
			line-height: @r*18px;
			height: @r*18px;
			min-width: @r*18px;
			border-radius: @r*9px;
			font-size: 0.9*@font-size-sm;
		}

		.tip-point{
			position: absolute;
			top:3px;
			left: 50%;
			margin-left: 6px;
			background: @color-highlight;
			color:#fff;
			text-align: center;
			width: @r*8px;
			height: @r*8px;
			border-radius: @r*4px;
			display: block;
		}
	}


	&menu-horizon-sm{
		padding:2px 0;
		height: @r*54px;
		.menu-pic{
			width:2em;
			height:1.2em;
			line-height: 1.2em;
			font-size: 1.2*@font-size-lg;
			display: block;
			color: #999;

			img{
				width: @r*30px;
		    height: @r*30px;
		    //border-radius: .8em;
			}
		}

		.menu-title{
			padding:@r*1px 0;
			font-size: @r*10px;//@font-size-sm;
			display: block;
			line-height: 1em;
			color: #999;
		}
	}

	&menu-horizon-border{
		.menu-horizon-item{
			padding:@r*10px 0  @r*10px  0;
			flex:1;
			border-right: 1px @line-color-light solid;
		}
	}

	&menu-horizon-circle{
		.menu-horizon-item{
			.menu-pic{
				 width:1.6em;
				 height:1.6em;
				 border-radius: 0.8em;
				 //background: @color-primary;
				 line-height: 1.6em;
				 font-size: 1.4*@font-size-lg;
				 display: block;

				 i{
					 color:#fff;
					 font-size: 1.4*@font-size-lg;

				 }
			 }
		}
	}


}

.menu-current{

		.menu-pic{
			color: @color-primary !important;
		}

		.menu-title{
			color: @color-primary !important;
		}
}