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

.c_step {
	background:@bg; font-size:116.67%;
	> ul {
		display:flex;
		> li {
			text-align:left; flex:1; overflow:hidden; position:relative; padding:0.5*@gap; padding-left:0.5*@gap+(1+2*@gap)/2*1.44;
			.step { text-align:center; width:1em; height:1em; background:@primary; color:@bg; line-height:1em; padding:0.5*@gap; float:left; margin-right:0.5*@gap; border:0 none; font-weight:bold; border-radius:50%;}
			.title { line-height:1+@gap; .x_to;}
			&:before { content:""; position:absolute; top:0; left:-(1+2*@gap)/2; width:1+2*@gap; height:1+2*@gap; background:@bg; border-top:1px solid @fg-light-8; border-right:1px solid @fg-light-8; transform:rotate(45deg);}
			&:first-child { padding-left:0.5*@gap;}
			&:first-child {
				&:before { display:none;}
			}
		}
		> li.on {
			background:@primary;
			.step { background:@bg; color:@primary;}
			.title { color:@bg;}
			&:before { border:0 none;}
		}
		> li.on + li {
			&:before { background-color:@primary; border:0 none;}
		}
		> li.link { cursor:pointer;}
	}
	&-blue {
		> ul {
			> li {
				&:before { background:@primary;}
			}
		}
	}
}
.c_step-blue {
	background:@primary;
	> ul {
		> li {
			.step { background:@bg; color:@primary;}
			.title { color:@bg;}
		}
		> li.on {
			.step { color:@primary-dark-3;}
			background:@primary-dark-3;
		}
		> li.on + li {
			&:before { background-color:@primary-dark-3;}
		}
	}
}
.c_step-v {
	> ul > li {
		padding:-0.25+0.5*@gap 0.5*@gap 0.5*@gap 0.5*@gap;
		.step { float:none; margin:0 auto; z-index:20; position:relative; border:0.25*@gap solid @bg;}
		.title { text-align:center; line-height:1+0.5*@gap; font-size:85.71%;}
		&:before { height:1px; top:1+0.5*@gap; background:@fg-light-8-5; width:50%; left:0; z-index:10; border:0 none; transform:rotate(0);}
		&:after { content:""; position:absolute; height:1px; top:1+0.5*@gap; background:@fg-light-8-5; width:50%; right:0; z-index:10;}
		&:last-child {
			&:after { display:none;}
		}
	}
	> ul > li.on {
		background:@bg;
		.step { background:@warning; color:@bg;}
		.title { color:@fg;}
	}
	> ul > li.on + li:before { background:@fg-light-8-5;}
	> ul > li.link.active {
		.step { border-color:@fg-light-9-5;}
	}
}
.c_step-blue.c_step-v {
	> ul > li {
		background:none;
		.step { border-color:@primary; background:@primary-light-6;}
		.title { color:@primary-light-6;}
		&:before { background:@primary-light-3;}
		&:after { background:@primary-light-3;}
	}
	> ul > li.on {
		.step { background:@bg; color:@primary;}
		.title { color:@bg;}
	}
	> ul > li.on + li:before { background:@primary-light-3;}
	> ul > li.link.active {
		background:@primary-light-3;
		.step { border-color:@primary-light-3;}
	}
	> ul > li.link.active + li:before { background:@primary-light-3;}
}