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

@icon-prefix-cls: ~'@{ant-prefix}-icon';
@btn-prefix-cls: ~'@{ant-prefix}-btn';

.@{timeline-prefix-cls} {
	&-item {
		&-content {
			line-height: @layout-height-3;
			top: 0;
			min-height: 46px;
			margin: 0 0 0 @timeline-dot-size + 12px;
			padding-bottom: 20px;
		}

		&-head {
			width: @timeline-dot-size / 2;
			height: @timeline-dot-size / 2;
			// border-radius: @timeline-dot-size;
			top: 3px;
			margin: 4px;

			&-blue {
				color: @primary-color;
				border-color: @primary-color;
				background-color: @primary-color;
			}

			&-red {
				color: @danger-color;
				border-color: @danger-color;
				background-color: @danger-color;
			}

			&-green {
				color: @success-color;
				border-color: @success-color;
				background-color: @success-color;
			}

			&-yellow {
				color: @warning-color;
				border-color: @warning-color !important; // Override inline style.
				background-color: @warning-color;
			}

			&-gray {
				color: @gray-60;
				border-color: @gray-60;
			}

			// Icon
			&-custom {
				width: @timeline-dot-size;
				height: @timeline-dot-size;
				border-radius: initial;
				background-color: initial;
				left: unset;
				padding: unset;
				transform: none;
				margin: 0;

				.@{icon-prefix-cls} {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				&.@{timeline-prefix-cls}-item-head-blue {
					.@{icon-prefix-cls} {
						color: @primary-color;
					}
				}

				&.@{timeline-prefix-cls}-item-head-red {
					.@{icon-prefix-cls} {
						color: @danger-color;
					}
				}

				&.@{timeline-prefix-cls}-item-head-green {
					.@{icon-prefix-cls} {
						color: @success-color;
					}
				}
			}
		}

		&-tail {
			top: (@timeline-dot-size + 3px + 4px);
			left: ((@timeline-dot-size - @timeline-width) / 2);
			bottom: @timeline-item-padding-bottom;
			height: initial;
			min-height: @timeline-item-padding-bottom;
			border: none;
			width: 1px;
			background-color: @timeline-color;
		}

		// Content
		&-title {
			font-size: @font-size-base;
			color: @heading-color;
			font-weight: @font-weight-medium;
		}

		&-description {
			font-size: @font-size-sm;
			color: @font-color-caption;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		&-footer {
			font-size: 10px;
			color: @font-color-caption;
		}

		// Content color
		&-red {
			.@{timeline-prefix-cls}-item-title {
				color: @danger-color;
				font-weight: 500;
			}
		}

		&-green {
			.@{timeline-prefix-cls}-item-title {
				color: @success-color;
			}
		}

		// Active
		&-active {
			.@{timeline-prefix-cls}-item-title {
				font-weight: 500;
				color: @heading-color;
			}
		}

		&-custom {
			.@{timeline-prefix-cls}-item-tail {
				top: (16px + 8px);
			}
		}

		// Disabled
		&-disabled {
			.@{timeline-prefix-cls}-item {
				&-head {
					color: @disabled-color;
					border-color: @disabled-color;
				}

				&-content,
				&-title,
				&-description,
				&-footer {
					color: @disabled-color;
				}

				&-tail {
					background-color: @border-color-base;
				}
			}
		}

		&-last {
			> .@{timeline-prefix-cls}-item-tail {
				display: block;
			}
			> .@{timeline-prefix-cls}-item-content {
				min-height: unset;
			}
		}
	}

	//时间线标签
	&-label {
		&.@{timeline-prefix-cls} .@{timeline-prefix-cls}-item-label {
			top: 0;
		}

		.@{timeline-prefix-cls}-item-active {
			.@{timeline-prefix-cls}-item-label {
				font-weight: 500;
				color: @heading-color;
			}
		}

		.@{timeline-prefix-cls}-item-red {
			.@{timeline-prefix-cls}-item-label {
				font-weight: 500;
				color: @danger-color;
			}
		}
	}

	//其他时间线标签
	&-alternate {
		.@{timeline-prefix-cls}-item-active {
			.@{timeline-prefix-cls}-item-content {
				color: @heading-color;
			}
		}
	}

	//针对展开收起的样式
	&-item-folded {
		padding-bottom: 0;
		// overflow: hidden;
		max-height: 22px;
		transition: max-height 1s;
		.@{timeline-prefix-cls}-item-content {
			min-height: 0px;
		}

		&.@{timeline-prefix-cls}-item-left {
			.@{timeline-prefix-cls}-item-folder-button {
				.@{btn-prefix-cls} {
					left: calc(50% - 4px);
				}
				.@{timeline-prefix-cls}-item-head {
					margin-left: 0px;
				}
			}
		}

		&.@{timeline-prefix-cls}-item-right {
			.@{timeline-prefix-cls}-item-folder-button {
				width: calc(50% - 12px);
				text-align: right;
				.@{timeline-prefix-cls}-item-head {
					margin-left: 0px;
				}
			}
		}
	}
	&-item-folder-button {
		margin-bottom: @timeline-item-padding-bottom;
		position: relative;

		.@{timeline-prefix-cls}-item-head {
			border-top: 0;
			border-bottom: 0;
			border-right: 0;
			border-left: 1px dotted @timeline-color !important;
			height: 22px;
			border-radius: 0;
			width: 0;
			left: ((@timeline-dot-size - @timeline-width) / 2);
			top: 0;
			background-color: unset !important;
			margin: 0;
		}
		.@{btn-prefix-cls} {
			top: -12px;
			margin-left: @timeline-dot-size + 12px;
			.@{icon-prefix-cls} {
				margin-left: 0;
				vertical-align: middle;
				svg {
					width: 14px;
					height: 14px;
				}
			}
			&:after {
				content: none;
			}
		}
	}

	&-item-unfolded {
		max-height: 200px;
		.@{timeline-prefix-cls}-item-folder-button {
			.@{timeline-prefix-cls}-item-head {
				border-style: solid;
			}
		}
	}
}