@import url(~antd/lib/steps/style/index-pure.less);
@import '../../style/themes/index';
@import '../../style/mixins/index.less';

@wait-icon-color: @border-color-base;
@wait-description-color: @font-color-caption;
@process-description-color: @wait-description-color;
@finish-description-color: @wait-description-color;
@icon-prefix-cls: ~'@{ant-prefix}-icon';
@process-icon-bg-color: @primary-60;
@process-icon-breathing-bg-color: linear-gradient(45deg, @primary-60, @primary-40, @primary-30);

.@{steps-prefix-cls}-item {
	&-icon {
		border-color: transparent;

		.@{steps-prefix-cls}-icon {
			line-height: @steps-icon-size - 2px;
			height: 100%;
			display: block;
			display: flex;
			justify-content: center;
			align-items: center;
			top: initial;

			.@{icon-prefix-cls} {
				font-size: @iconfont-size-lg;
			}
		}
	}

	&-description {
		line-height: calc(@layout-height-2 + 2px);
		color: @wait-description-color;
		font-size: @steps-description-font-size;
		margin-top: 4px;
	}

	&-finish &-icon,
	&-error &-icon,
	&-process &-icon {
		border-color: transparent !important;
		border: 0;
	}

	.@{steps-prefix-cls}-error-icon {
		color: @error-color;
	}

	&-process > &-container > &-icon {
		background: @process-icon-bg-color;
	}

	&-wait &-icon .@{icon-prefix-cls} {
		color: @wait-icon-color;
	}

	&-active &-title {
		font-weight: 500;
	}

	// &-custom {
	// 	.@{steps-prefix-cls}-item-container {
	// 		display: flex;
	// 		flex-direction: column;
	// 		width: fit-content;
	// 		align-items: center;
	// 	}

	// 	.@{steps-prefix-cls}-item-title {
	// 		text-align: center;
	// 		width: 100%;
	// 		padding-right: 0;

	// 		&:after {
	// 			top: -16px;
	// 		}
	// 	}
	// }
}

// Gradient steps border
.@{steps-prefix-cls} {
	.@{steps-prefix-cls}-item-finish {
		& > .@{steps-prefix-cls}-item-container {
			& > .@{steps-prefix-cls}-item-tail::after,
			& > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title::after {
				background: @gradient-ink-bar;
				background-size: 100%;
			}
		}
	}

	&&-breathing {
		.@{steps-prefix-cls}-item-finish {
			& > .@{steps-prefix-cls}-item-container {
				& > .@{steps-prefix-cls}-item-tail::after,
				& > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title::after {
					.gradient-breathing-animation();
				}
			}
		}
		&:not(.@{steps-prefix-cls}-dot)
			.@{steps-prefix-cls}-item-process:not(.@{steps-prefix-cls}-item-custom)
			> .@{steps-prefix-cls}-item-container
			> .@{steps-prefix-cls}-item-icon {
			background: @process-icon-breathing-bg-color;
			background-size: 250%;
			.gradient-breathing-animation();
		}
	}
}

// Disabled
.@{steps-prefix-cls}-disabled,
.@{steps-prefix-cls}-item-disabled {
	.@{steps-prefix-cls}-item-container {
		.@{steps-prefix-cls}-item-content {
			.@{steps-prefix-cls}-item-title,
			.@{steps-prefix-cls}-item-description {
				color: @steps-disabled-color;
			}
		}
	}

	.@{steps-prefix-cls}-item-icon {
		border-color: @steps-disabled-color;

		.@{steps-prefix-cls}-icon {
			color: @steps-disabled-color!important;
		}
	}

	&.@{steps-prefix-cls}-item-process,
	.@{steps-prefix-cls}-item-process {
		.@{steps-prefix-cls}-item-icon {
			background: @steps-disabled-color!important;

			.@{steps-prefix-cls}-icon {
				color: @white!important;
			}
		}
	}

	&.@{steps-prefix-cls}-item-finish,
	.@{steps-prefix-cls}-item-finish {
		.@{steps-prefix-cls}-item-title::after {
			background-color: @steps-disabled-color;
		}
	}
}

// 带百分比带进度条部分样式
.@{steps-prefix-cls}-progress-icon {
	position: absolute;
	top: -2px;
	left: -2px;

	.@{steps-prefix-cls}-icon {
		transform: translateX(-50%);
		position: absolute;
		top: 0;
		left: 50%;
	}
}

// line的样式
.@{steps-prefix-cls} {
	&-line &-item {
		text-align: left;
		padding-left: 0px !important;

		&:before {
			left: 0;
			width: calc(100% - 2px);
			background-color: @process-tail-color;
			border-top-right-radius: @border-radius-base;
		}

		&:after {
			display: none;
		}
	}

	&-line &-item&-item-active,
	&-line &-item&-item-finish {
		&:before {
			width: calc(100% - 2px);

			background-color: @blue-base;
			background-size: 250%;
		}

		.@{steps-prefix-cls}-line-index {
			color: @blue-base;
		}
	}

	&-line &-item&-item-error {
		&:before {
			background-color: @danger-color;
		}

		.@{steps-prefix-cls}-line-index {
			color: @danger-color;
		}
	}

	&-line &-item&-item-disabled {
		&:before {
			background-color: @process-tail-color;
		}

		.@{steps-prefix-cls}-line-index {
			color: @disabled-color;
		}
	}

	&-line &-item-container {
		margin-left: 0;
		// display: flex;
		// flex-direction: column;
	}

	&-line &-item-container &-item-content &-item-title {
		line-height: @layout-height-3;
	}

	&-line&-breathing &-item&-item-active,
	&-line&-breathing &-item&-item-finish {
		&:before {
			width: calc(100% - 2px);
			background: @process-icon-breathing-bg-color;
			background-size: 250%;
			.gradient-breathing-animation();
		}
	}
}

// round-bar样式
// .@{steps-prefix-cls} {
// 	&-roundBar {
// 		background-color: @gray-10;
// 		border-radius: calc(~'@{steps-round-bar-md-height}' / 2);
// 		padding-top: 0;
// 		overflow: hidden;
// 	}

// 	&-roundBar &-item-container {
// 		padding-bottom: 0;
// 		margin-left: 0;
// 		padding-left: calc(~'@{steps-round-bar-md-height}' / 2);
// 		display: flex;
// 		align-items: center;
// 		justify-content: center;
// 		border-radius: calc(~'@{steps-round-bar-md-height}' / 2) 0 0 calc(~'@{steps-round-bar-md-height}' / 2);
// 	}

// 	&-roundBar &-item {
// 		&::before {
// 			display: none;
// 		}

// 		&::after {
// 			z-index: 99;
// 			width: calc(~'@{steps-round-bar-md-height}' / 2);
// 			height: @steps-round-bar-md-height;
// 			border-radius: 0 calc(~'@{steps-round-bar-md-height}' / 2) calc(~'@{steps-round-bar-md-height}' / 2) 0;
// 			border: 0;
// 			background-color: @blue-10;
// 			transform: rotate(0);
// 			top: 0;
// 			margin: 0;
// 			padding: 0;
// 			left: unset;
// 			right: 0px;
// 		}

// 		&-title {
// 			font-size: @font-size-base !important;
// 			line-height: @steps-round-bar-md-height;
// 		}

// 		border-top-right-radius: calc(~'@{steps-round-bar-md-height}' / 2);
// 		border-bottom-right-radius: calc(~'@{steps-round-bar-md-height}' / 2);
// 	}

// 	&-roundBar &-item&-item-active:after {
// 		background-color: @blue-50;
// 	}
// 	&-roundBar &-item&-item-wait:after {
// 		background-color: @gray-10;
// 	}
// 	&-roundBar &-item&-item-error:after {
// 		background-color: @danger-color-light;
// 	}
// 	&-roundBar &-item&-item-disabled:after {
// 		background-color: @gray-10-hover;
// 	}

// 	&-roundBar:not(&-label-vertical) &-item {
// 		padding: 0 calc(~'@{steps-round-bar-md-height}' / 2);
// 		margin-left: calc(~'-@{steps-round-bar-md-height}' / 2);
// 	}

// 	&-roundBar &-item-active,
// 	&-roundBar &-item-wait,
// 	&-roundBar &-item-error {
// 		.@{steps-prefix-cls}-item-icon {
// 			width: @steps-round-bar-active-dot-size;
// 			height: @steps-round-bar-active-dot-size;
// 		}

// 		.@{steps-prefix-cls}-round-bar-icon {
// 			width: @steps-round-bar-active-dot-size;
// 			height: @steps-round-bar-active-dot-size;
// 			border-radius: 100%;
// 		}
// 	}

// 	&-roundBar &-item-active {
// 		background-color: @blue-10;

// 		.@{steps-prefix-cls}-item-container {
// 			background-image: @gradient-primary-2;
// 		}

// 		.@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title {
// 			color: @component-background;
// 		}

// 		.@{steps-prefix-cls}-round-bar-icon {
// 			background-color: @component-background;
// 		}
// 	}

// 	&-roundBar &-item-finish {
// 		background-color: @blue-10;

// 		.@{steps-prefix-cls}-item-container {
// 			background-color: @blue-10;
// 		}

// 		.@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title {
// 			color: @steps-round-bar-finish-title-color;
// 		}

// 		.@{steps-prefix-cls}-item-icon {
// 			width: @steps-round-bar-finish-dot-size;
// 			height: @steps-round-bar-finish-dot-size;
// 			margin-right: 4px;
// 		}

// 		.@{steps-prefix-cls}-round-bar-icon {
// 			color: @blue-40;
// 			line-height: @steps-round-bar-finish-dot-size;
// 		}
// 	}

// 	&-roundBar &-item-wait {
// 		background-color: @gray-10;

// 		.@{steps-prefix-cls}-round-bar-icon {
// 			border: 1px @gray-base solid;
// 		}
// 	}

// 	&-roundBar &-item-error {
// 		background-color: @blue-10;

// 		.@{steps-prefix-cls}-item-container {
// 			background-image: none;
// 			background-color: @danger-color-light;
// 		}

// 		.@{steps-prefix-cls}-round-bar-icon {
// 			background: @danger-color;
// 		}

// 		.@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title {
// 			color: @danger-color;
// 		}
// 	}

// 	//disabled 下各个container样式
// 	&-roundBar &-item-disabled {
// 		background-color: @gray-10-hover;

// 		.@{steps-prefix-cls}-item-container {
// 			background-color: @gray-10-hover;
// 			background-image: none;
// 		}

// 		.@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title,
// 		.@{steps-prefix-cls}-round-bar-icon {
// 			color: @gray-30;
// 		}

// 		&.@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-round-bar-icon {
// 			background-color: @gray-30;
// 		}

// 		&.@{steps-prefix-cls}-item-wait .@{steps-prefix-cls}-round-bar-icon {
// 			border-color: @gray-30;
// 		}
// 	}

// 	&-roundBar &-item-icon {
// 		border: 0px;
// 		background-color: transparent !important;
// 	}
// }
@import './small.less';
@import './vertical.less';
@import './progress-dot.less';