@import "mixins/mixins";
@import "common/var";

@include b(timeline) {
	list-style: none;
	margin: 0;
	padding: 0;
	// 只有pending时，倒数第二个li样式
	@include e(pending) {
		.kc-timeline-item:nth-last-of-type(2) {
			.kc-timeline-item__tail {
				border-left-style: dotted;
			}
			.kc-timeline-item__content {
				min-height: 48px;
			}
		}
	}
	@include e(reverse) {
		// 倒序时，第一个是pending，添加连线并重置其高度
		.kc-timeline-item__pending {
			.kc-timeline-item__tail {
				border-left: 2px dotted #E4E7ED;
				display: block;
			}
			.kc-timeline-item__content {
				min-height: 48px;
			}
		}
		// 最后一个是正常item，同样需要将倒数第二个item连线及高度进行重置
		.kc-timeline-item:nth-last-of-type(2) {
			.kc-timeline-item__tail {
				border-left-style:solid;
			}
			.kc-timeline-item__content {
				min-height: 0;
			}
		}
	}
}
@include b(timeline-item) {
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
	position: relative;
	@include e(tail) {
		height: 100%;
		border-left: 2px solid #E4E7ED;
		position: absolute;
		left: 4px;
		top: 0;
	}
	@include e(content) {
		padding: 1px 1px 10px 24px;
		font-size: 12px;
		position: relative;
		top: -3px;
	}
	@include e(head) {
		width: 10px;
		height: 10px;
		background-color: $--color-white;
		border-radius: 50%;
		border: 2px solid transparent;
		position: absolute;
		box-sizing: border-box;
		@include when(dot) {
			width: 40px;
			height: auto;
			margin-top: 6px;
			padding: 3px 0;
			text-align: center;
			line-height: 1;
			border: 0;
			border-radius: 0;
			font-size: 14px;
			position: absolute;
			left: -15px;
			transform: translateY(-50%);
		}
		@include status(blue) {
			border-color: $--color-info;
			color: $--color-info;
		}
		@include status(red) {
			border-color: $--color-danger;
			color: $--color-danger;
		}
		@include status(green) {
			border-color: $--color-success;
			color: $--color-success;
		}
		@include status(pending) {
			animation: spinnerFour .8s linear infinite;
			border: 1px solid mix($--color-white, $--color-info, 80%);
			border-top: 1px solid $--color-info;
			border-radius: 50%;
			width: 10px;
			height: 10px;
		}
	}
	@include e(pending) {
		.kc-timeline-item__tail {
			display: none;
		}
	}
	&:last-child .kc-timeline-item__tail {
		display: none;
	}
}

@keyframes spinnerFour {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}