@import "global.less";

@timeLineLeftWidth: 8em;
@timeLineIconSize: 2em;
@timeLineIconMarginLeft: @timeLineLeftWidth - @timeLineIconSize/2;
@timeLineContentMarginLeft: @timeLineLeftWidth + @timeLineIconSize;
@timeLineLineColor: #e0e0e0;
@timeLineDefaultIconColor: #18a689;
@timeLineItemMarginBottom: 0.4em;

@-webkit-keyframes breathe {
	0% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

.ui.time-line, c-timeline {

	> ul > li {
		> content, > label, > icon {
			display: block;

		}
	}

	> .items, > ul {
		list-style: none;
		padding: 0.6em 0;
		height: 100%;
		overflow: auto;
		> .item, > li {
			position: relative;
			padding: 0 !important;
			&:before {
				position: absolute;
				border: 1px solid @timeLineLineColor;
				left: @timeLineLeftWidth;
				top: @timeLineIconSize - @timeLineItemMarginBottom;
				bottom: 0em;
				content: "";
			}
			.label, > label {
				position: absolute;
				top: 0em;
				width: @timeLineLeftWidth;
				display: inline-block;
				text-align: right;
				padding: 0 @timeLineIconSize 0 0;
			}

			.content, > content {
				margin-left: @timeLineContentMarginLeft;
				padding-bottom: @timeLineItemMarginBottom;
				margin-bottom: @timeLineItemMarginBottom;
				p {
					color: rgba(103, 106, 108, 0.7);
					padding: 0.4em 0
				}
			}

			> .icon, > icon {
				position: absolute;
				left: @timeLineIconMarginLeft;
				top: -0.4em;
				display: inline-block;
				width: @timeLineIconSize;
				height: @timeLineIconSize;
				text-align: center;
				color: @timeLineDefaultIconColor;
				border: 2.5px solid @timeLineLineColor;
				> .icon {
					line-height: 1.8em;
					margin: 0;
				}
			}

			&:hover {
				> .icon, > icon {
					> i {
						.animation-timing-function(ease-in-out);
						.animation-name(breathe);
						.animation-duration(500ms);
						.animation-iteration-count(infinite);
						.animation-direction(alternate);
					}
				}
				> .icon, > icon, &:before {
					border-color: fadeout(@timeLineDefaultIconColor, 40%);
				}
			}
		}
	}

	&.circular {
		> .items, > ul {
			> .item, > li {
				> .icon, > icon {
					border-radius: 50%;
				}
			}
		}
	}

	&.log {
		@oddBkgColor: lighten(@timeLineDefaultIconColor, 8%);
		@evenBkgColor: lighten(@timeLineDefaultIconColor, 3%);
		@cupFontColor: rgba(255, 255, 255, 0.8);
		@titleColor: rgba(255, 255, 255, 0.95);
		@titleBorderColor: rgba(255, 255, 255, 0.3);
		> .items, > ul {
			> .item, li {
				&:before, > .icon {
					border-color: fadeout(@oddBkgColor, 30%);
				}
				.icon {
					color: @timeLineDefaultIconColor;
				}
				> .content, > content {
					position: relative;
					padding: 0.4em 1em;
					color: @titleColor;
					border-radius: 0.2em;
					strong {
						display: block;
						border-bottom: 1px solid @titleBorderColor;
						line-height: 2em;
					}
					p {
						color: @cupFontColor;
						font-size: 0.85em;
						padding: 1em 0;
					}
					&:before {
						width: 0;
						height: 0;
						position: absolute;
						left: -0.35em;
						content: "";
						top: 1em;
						border-top: 0.4em solid transparent;
						border-right: 0.4em solid transparent;
						border-bottom: 0.4em solid transparent;
					}
				}
				> .label, > label {
					top: 0.1em;
					> * {
						display: list-item;
					}
					> .date {
						color: rgba(0, 0, 0, 0.6);
						font-size: 0.8em;
					}
					> .date-time {
						font-size: 1.4em;
						color: @evenBkgColor;
					}
				}

				&:nth-of-type(even) {
					> .content, > content {
						position: relative;
						background-color: @evenBkgColor;
						&:before {
							border-right-color: @evenBkgColor;
						}
					}
				}
				&:nth-of-type(odd) {
					> .content, > content {
						background-color: @oddBkgColor;
						&:before {
							border-right-color: @oddBkgColor;
						}
					}
				}
				&:hover {
					> .icon, > icon, &:before {
						border-color: @evenBkgColor;
					}
				}
			}
		}

	}
	.mixin_message_color(@name,@color) {
		@mOddBkgColor: lighten(@color, 8%);
		@mEvenBkgColor: lighten(@color, 3%);
		&.log.@{name} {
			> .items {
				> .item {
					&:before, > .icon {
						border-color: fadeout(@mOddBkgColor, 30%);
					}
					.icon {
						color: @color;
					}
					> .label {
						> .date-time {
							color: @mEvenBkgColor;
						}
					}
					&:nth-of-type(even) {
						> .content {
							background-color: @mEvenBkgColor;
							&:before {
								border-right-color: @mEvenBkgColor;
							}
						}
					}
					&:nth-of-type(odd) {
						> .content {
							background-color: @mOddBkgColor;
							&:before {
								border-right-color: @mOddBkgColor;
							}
						}
					}
					&:hover {
						> .icon, &:before {
							border-color: @mEvenBkgColor;
						}
					}

				}

			}
		}
	}
	//.mixin_message_color(red, @red);
	//.mixin_message_color(orange, @orange);
	//.mixin_message_color(yellow, @yellow);
	//.mixin_message_color(olive, @olive);
	//.mixin_message_color(green, @green);
	//.mixin_message_color(teal, @teal);
	//.mixin_message_color(blue, @blue);
	//.mixin_message_color(violet, @violet);
	//.mixin_message_color(purple, @purple);
	//.mixin_message_color(pink, @pink);
	//.mixin_message_color(brown, @brown);
	//.mixin_message_color(grey, @grey);
}

