.cl-timeline {
	&-item {
		display: flex;
		width: 100%;
		position: relative;

		&__timestamp {
			font-size: 24rpx;
			margin: 0 20rpx;
			text-align: center;
		}

		&__date {
			display: block;
			font-size: 24rpx;
			text-align: right;
		}

		&__time {
			display: block;
			font-size: 22rpx;
			text-align: right;
			color: #666;
		}

		&__node {
			display: flex;
			justify-content: center;
			position: relative;
			width: 52rpx;
			color: #ccc;

			&::after {
				content: "";
				display: block;
				height: calc(100% - 32rpx);
				width: 4rpx;
				background-image: linear-gradient(
					to bottom,
					currentColor 0%,
					currentColor 80%,
					transparent 50%
				);
				background-size: 4rpx 18rpx;
				background-repeat: y-repeat;
				transform: scaleX(1);
				position: absolute;
				top: 32rpx;
				border-radius: 10rpx;
			}

			&-box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 32rpx;
				width: 32rpx;
			}
		}

		&__dot {
			display: block;
			height: 16rpx;
			width: 16rpx;
			z-index: 9;
			border-radius: 18rpx;
		}

		&__icon {
			font-size: 40rpx;
			z-index: 2;
			position: relative;
		}

		&__content {
			font-size: 24rpx;
			flex: 1;
			margin: 0 20rpx;
			position: relative;
			padding-bottom: 60rpx;
		}

		&.is-line {
			.cl-timeline-item__node::after {
				display: none;
			}
		}
	}
}