@import "../default-skin.less";
@import "../../global/mixin.less";

// 向导组件
.c_guide {
	position:relative; overflow:hidden; background:@primary;
	ul { display:flex; margin-left:-(1+2*@gap)*1.44/2;}
	li {
		font-size:116.67%; cursor:pointer; flex:1; box-sizing:border-box; height:1+2*@gap; line-height:1+2*@gap; position:relative; white-space:nowrap;
		background:@primary; color:@bg; padding-left:(1+2*@gap)*1.44/2+@gap; padding-right:@gap;
	}
	li > span { .x_to; display:block;}
	li:before {
		position:absolute; right:(-1-2*@gap)/2; top:0; content:""; display:block; width:1+2*@gap; height:1+2*@gap; border:1px solid rgba(255,255,255,0.5); border-top-left-radius:1+2*@gap; transform:rotate(-45deg);
		background:@primary;
		border-top:0 none; border-left:0 none;
	}
	li.on { background:@primary-dark-1; z-index:11; cursor:default;}
	li.on:before { background:@primary-dark-1; border-color:@primary-dark-1;}
	li:nth-of-type(1) { z-index:10;}
	li:nth-of-type(2) { z-index:9;}
	li:nth-of-type(3) { z-index:8;}
	li:nth-of-type(4) { z-index:7;}
	li:nth-of-type(5) { z-index:6;}
	li:nth-of-type(6) { z-index:5;}
	li:nth-of-type(7) { z-index:4;}
	li:nth-of-type(8) { z-index:3;}
	li:nth-of-type(9) { z-index:2;}
	li:nth-of-type(10) { z-index:1;}
}