$lessColor: #eceef0;
$subColor: #555;
$successColor: #41c272;

.p5-step {
	display: flex;
}
.p5-step-item {
	font-size: 12px;
	flex: 1;
	flex-basis: 50%;
	color: $lessColor;
	position: relative;
	&-main {
		display: flex;
		align-items: center;
		height: 24px;
		line-height: 24px;
		&-num {
			width: 24px;
			height: 24px;
			line-height: 24px;
			box-sizing: border-box;
			border-radius: 50%;
			border-width: 2px;
			border-style: solid;
			border-color: $lessColor;
			text-align: center;
			flex-shrink: 0;
			background: #fff;
			position: relative;
			z-index: 10;
		}
		&-line {
			width: 100%;
			flex-shrink: 1;
			height: 2px;
			background: $lessColor;
		}
	}
	&-text {
		margin-top: 10px;
		&-title {
			font-weight: bold;
			font-size: 16px;
		}
		&-desc {
			margin-top: 4px;
		}
	}
	&:last-child {
		flex-basis: 26%;
		.p5-step-item-main-line {
			display: none;
		}
	}
}

// 当前步骤
.p5-step-item.p5-step-item-active {
	color: $subColor;
	.p5-step-item-main{
		&-num {
			border-color: $subColor;
		}
	}
}

// 已经完成步骤
.p5-step-item-finished {
	color: $successColor;
	.p5-step-item-main{
		&-num {
			border-color: $successColor;
		}
	}
	&:not(.p5-step-item-lastfinished) {
		.p5-step-item-main-line {
			background: $successColor;
		}
	}
}
// 居中
.p5-step-item.p5-step-item-center{
	flex-basis: 25%;
	
	.p5-step-item-text {
		text-align: center;
	}
	.p5-step-item-main {
		display: block;
		text-align: center;
		position: relative;
	}
	.p5-step-item-main-line {
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.p5-step-item-main-num { 
		display: inline-block;
	}
	/* &:first-child {
		.p5-step-item-main {
			justify-content: flex-end;
		}
		.p5-step-item-main-line {
			width: 50%;
		}
	}
	&:last-child {
		.p5-step-item-main {
			justify-content: flex-start;
		}
		.p5-step-item-main-line {
			width: 50%;
		}
	} */
}