@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-timeline-item {
	position: relative;
	padding: 0 0 12px;
	margin: 0;
	font-size: 14px;
	box-sizing: border-box;

	&__tail {
		height: 100%;
		border-left: 2px solid #e8e8e8;
		position: absolute;
		left: 5px;
		top: 0;
		box-sizing: border-box;
	}

	&__dot {
		width: 12px;
		height: 12px;
		background-color: #fff;
		border-radius: 50%;
		border: 2px solid @positive;
		position: absolute;
		color: @positive;
		box-sizing: border-box;

		&--custom {
			margin-left: 1px !important;
			left: 5px;
			top: 8px;
			border: 0;
			border-radius: 0;
			width: auto;
			height: auto;
			background-color: transparent;
			text-align: center;
			transform: translate(-50%, -50%);
		}
	}

	&__content {
		padding: 0 0 10px 20px;
		position: relative;
		top: -5px;
		width: 100%;
		box-sizing: border-box;
	}
	
	&--last &__tail, 
	&--pending &__tail--pending {
		display: none;
	}

	&--last&--pending &__tail {
		display: block;
		border-left-style: dotted;
	}

	&--right &__tail {
		left: 100%;
	}

	&--right &__dot {
		left: 100%;
		margin-left: -5px;
	}

	&--right &__content {
		text-align: right;
		right: 0;
		left: -20px;
	}
	
	&--alternate&--right &__tail, 
	&--alternate&--left &__tail {
		left: 50%;
	}
	
	&--alternate&--right &__dot, 
	&--alternate&--left &__dot {
		left: 50%;
		margin-left: -5px;
	}

	&--alternate&--right &__content {
		text-align: right;
	    right: 50%;
	    width: 50%;
	}

	&--alternate&--left &__content {
		text-align: left;
	    left: 50%;
	    width: 50%;
	}
}