@import  "coco-variables.scss";

.co-steps{
    
    // 线
    .el-step.is-horizontal{
		.el-step__line{ top:50px}
		.el-step__title{ border:1px solid #ccc; border-radius: 100px; }
	}
    // 图标
    .el-step__icon.is-icon{ border-radius: 200px; background:linear-gradient(-84deg, #1890FF 0,#001C88 100%); cursor: pointer;}
	
    .el-step__title{
        display:inline-block; line-height: 1.5; margin: 10px 0 15px 0; font-weight: bold;
        span{ padding: 2px 8px;color: #FFF;}
    }

    .el-step{
        &.is-center .el-step__description{ padding-left:10%; padding-right: 10%; }
    }


    // 此样式是专为军工项目定制，未来节点用虚线白底,且不显示标题和描述
    &.lastAdd{
        // // 当前
        // .is-process{
        //     &.el-step__head{ color: #FFF;
        //         .el-step__icon.is-icon{ box-shadow: 0 5px 20px rgba(24,144,255,0.5);}
        //     }
        // }
        // 已完成
        .is-finish{ 
            &.el-step__head{ border-color: #C0C4CC;}
        }
        // 未来
        .is-wait{
            &.el-step__head{ color:#999}
            .el-step__icon{ background:#ffffff; border:1px dotted #ccc; box-shadow: none!important; color: #999;
                &::before{ display: none;}
                &:hover{ background:#ffffff; border:1px dotted #333;
                    i{ color: #333;}
                }
            }
            &.el-step__title,.el-step__description{ display: none}
        }
        
    }

    // 当前
    .is-process{
        .el-step__icon{ box-shadow: 0 5px 20px rgba(24,144,255,0.5);}
        &.el-step__title{ color: #1890FF;}
    }
    // 已完成
    .is-finish{
        .iconfont{ font-size: 40px; color: #FFF;}
        &.el-step__head{ border-color: #C0C4CC;}
        .el-step__icon{ box-shadow: 0 5px 20px rgba(24,144,255,0.5);}
        &.el-step__title{ color: rgba(50,60,80,0.8);}
    }
    // 未来
    .is-wait{
        .el-step__icon{ box-shadow: 0 5px 20px rgba(24,144,255,0.5);}
    }


    &.xl{
        // 图标
        .el-step__icon.is-icon{ width: 120px; height: 120px;
            &>i{ font-size: 50px;}
        }
        // 标题
        .el-step__title{ padding: 0 20px; line-height: 1.5; margin: 25px 0 18px 0; font-size: 20px; }
        // 线
        .el-step.is-horizontal .el-step__line{ top:60px}

        // 竖向
        .is-vertical{
            .el-step__head{ width: 120px; padding-bottom: 30px;}
            .el-step__line{ left: 59px;}
			.el-step__main{ padding-bottom: 10px;}
        }
    }
    &.md{
        // 图标
        .el-step__icon.is-icon{ width: 100px; height: 100px;
            &>i{ font-size: 40px;}
        }
        // 标题
        .el-step__title{ padding: 0 20px; line-height: 1.5; margin: 10px 0 15px 0; }
        // 线
        .el-step.is-horizontal .el-step__line{ top:50px}

        // 竖向
        .is-vertical{
            .el-step__head{ width: 100px; padding-bottom: 30px;}
            .el-step__line{ left: 49px;}
			.el-step__main{ padding-bottom: 10px;}
        }
    }
	&.sm{
	        // 图标
	        .el-step__icon.is-icon{ width: 80px; height: 80px; 
	            &>i{ font-size: 30px;}
	        }
	        // 标题
	        .el-step__title{ padding: 0 10px; line-height: 1.5; margin: 10px 0 15px 0; font-size: 14px; }
	        // 线
	        .el-step.is-horizontal .el-step__line{ top:40px}
	
	        // 竖向
	        .is-vertical{
	            .el-step__head{ width: 80px; padding-bottom: 30px;}
	            .el-step__line{ left: 39px;}
				.el-step__main{ padding-bottom: 10px;}
	        }
	}
	&.xs{
	    // 图标
	    .el-step__icon{
			&.is-icon{ width: 30px; height: 30px; 
				&>i{ font-size: 16px;}
			}
			&.is-text{ width:30px; height:30px;}
		}
	    // 标题
	    .el-step__title{ padding: 0; line-height: 1.5; margin: 4px 0 10px 0; font-size: 14px; }
	    // 线
	    .el-step.is-horizontal .el-step__line{ top:10px}
	
	    // 竖向
	    .is-vertical{
	        .el-step__head{ width: 30px; padding-bottom: 10px;}
	        .el-step__line{ left: 15px;}
			.el-step__main{ padding-bottom: 10px;}
	    }
	}


    // 颜色
    &.blue_linear,.blue_linear,&.green_linear,.green_linear{
        .el-step__icon::before{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 200px;
            z-index: -1;
            transition: all 200ms ease;
        }
		.el-step__icon{ color: #FFFFFF;
			&.is-text{ border-width: 0;}
		}
    }
    &.blue_linear,.blue_linear{
        .el-step__icon{ 
            background:linear-gradient(-84deg, #1AB6FF 0, #028FFF 100%); box-shadow: 0 5px 20px rgba(24,144,255,0.5);
            &:hover{ box-shadow: 0 20px 20px rgba(24,144,255,0.3);
                &::before{ background: #0250B4; }
            }
        }
    }
    &.green_linear,.green_linear{
        .el-step__icon{ 
            background:linear-gradient(-84deg, #1ad11a 0, #00B050 100%); box-shadow: 0 5px 20px rgba(0,176,80,0.5);
            &:hover{ box-shadow: 0 10px 10px rgba(0,176,80,0.3);
                &::before{ background: #00833c; }
            }
        }
    }


}





.co-step{ 
	font-size: 0px;
	.is-finish{ opacity: 1;}
	.is-process{ opacity: 1;}
	.is-process::before{ 
		content: "";
		display: block;
		position: absolute;
		width: 90%;
		height: 100%;
		border-radius: 8px;
		background: rgba(0,0,0,.03);
		padding: 10px 0;
		top: -10px;
		left: 5%;
		z-index: -1;
	}
	.is-wait{ opacity: 0.3; filter:grayscale(100%)}
}
.co-step--vertical{
	// vertical
	.co-step__item{ height: 130px; width: 100%; text-align: left;}
	.co-step__line{ width: 4px; height: 100%; padding-bottom: 40px; padding-right: 0; left:28px;
		&>div{
			height: 100%;
			background: -moz-linear-gradient(top, rgba(192,196,204,0) 0%, #C0C4CC 100%);
			background: -webkit-linear-gradient(top, rgba(192,196,204,0) 0%,#C0C4CC 100%); 
			background: linear-gradient(to bottom, rgba(192,196,204,0) 0%,#C0C4CC 100%);
		}
		i{ transform: rotateZ(90deg); top: auto; bottom:-15px; right: -18px;}
	}
	.co-step__icon{ left: 0; vertical-align: middle; }
	.co-step__title{ display: inline-block; vertical-align: middle; padding-left: 10px;}
	.is-process::before{ left: -10px;right:-10px;width: auto;height: 60px; }
}
.co-step__item{ 
	width:20%; position: relative; text-align: center; display: inline-block;
	&:last-child .co-step__line{ display: none;}
	&.is-hover:hover{ cursor: pointer;
		.co-step__title{ font-weight: bold;}
		.co-step__icon::before,.co-step__icon::after{
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			background: rgba(0,0,0,.4);
			box-sizing: content-box;
			border-radius: 100px;
			z-index: -1;
			padding: 0px;
			left: 0px;
			top: 0px;
			transition:all 200ms ease;
		}
		.co-step__icon::before{
			background: rgba(0,0,0,.6);
		}
		.co-step__icon::after{
			background: rgba(0,0,0,0);
		}
	}
	&.is-hover:active{
		.co-step__icon::before{
			background: rgba(0,0,0,.05);
			padding: 10px;
			left: -10px;
			top: -10px;
		}
		.co-step__icon::after{
			background: rgba(0,0,0,.6);
		}
	}
	&.is-line .co-step__line{ padding-right: 0; padding-bottom:0;}
}
.co-step__line{
	position: absolute; left: 0; top:0;
	left: 50%; width: 100%; top: 28px; z-index: 0; padding-right: 40px;
	&>div{
		width: 100%; 
		background: -moz-linear-gradient(left, rgba(192,196,204,0) 0%, #C0C4CC 100%); 
		background: -webkit-linear-gradient(left, rgba(192,196,204,0) 0%,#C0C4CC 100%); 
		background: linear-gradient(to right, rgba(192,196,204,0) 0%,#C0C4CC 100%);
		height: 4px; position: relative;
	}
	i{position: absolute;right: -15px;font-size: 40px;top: 50%;transform: translateY(-50%); color: #C0C4CC;}
}
.co-step__icon{
	width:60px; height: 60px; border-radius: 60px; text-align: center; font-size: 0px;
	display: inline-block; z-index: 1; color: #fff; position: relative;
	&>.num{ font-size: 30px; line-height: 60px;}
	&>i{ font-size: 30px;line-height: 60px; }
	&>img{ height: 30px; position: relative;top: 50%; transform: translateY(-50%);}
}
.co-step__title{ font-size: 14px; line-height: 30px; color: $--text-color-primary;}