/* 
    Created on : 18.04.2015, 11:09:57
    Author     : DFD
	Styles for : DFD Timeline container & elements
*/

.dfd-timeline-container-wrap {
	.rel();
	&.dfd_timeline_vertical {
		> div {
			.rel();
			width: 50%;
			padding: 10px 0;
			&:nth-child(even) {
				padding-left: 10px;
				margin-left: 50%;
				&.timeline-block {
					.timeline-icon-block {
						right: 110%;
						.timeline-date {
							right: 150%;
						}
					}
				}
			}
			&:nth-child(odd) {
				padding-right: 10px;
				text-align: right;
				&.timeline-block {
					.timeline-icon-block {
						left: 110%;
						.timeline-date {
							left: 150%;
						}
					}
				}
			}
			&.timeline-block {
				.timeline-icon-block {
					.abs();
					top: 50%;
					.translate(0; -50%);
					z-index: -1;
					.timeline-date {
						.abs();
						top: 50%;
						.translate(0; -50%);
					}
				}
				.timeline-header-block {
					.timeline-header {
						padding: 0;
					}
				}
			}
		}
		&.included_vertical_line {
			border-width: 0;
			> div {
				border-width: 0;
				border-style: inherit;
				border-color: inherit;
				&:before {
					content: "";
					.abs();
					width: 20px;
					height: 0;
					top: 50%;
					.rotate(45deg);
					border-width: 0;
					border-bottom: 1px;
					border-color: inherit;
					border-style: inherit;
				}
				&:nth-child(even) {
					&:before {
						left: -10px;
						.rotate(-45deg);
					}
				}
			}
			.separation_line {
				.abs();
				top: 0;
				bottom: 0;
				left: 50%;
				border-width: 0;
				border-right: 1px;
			}
		}
		&.included_horisontal_line {
			border-width: 0;
			> div {
				border-width: 0;
				border-style: inherit;
				border-color: inherit;
				&:before {
					content: "";
					.abs();
					.block();
					width: 200%;
					bottom: 0;
					border-width: 0;
					border-bottom: 1px;
					border-color: inherit;
					border-style: inherit;
				}
				&:after {
					content: "";
					.abs();
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 10px solid;
					border-top-color: inherit;
					bottom: -9px;
					left: 100%;
					margin-left: -5px;
				}
				&:last-child {
					border-bottom-width: 0;
					&:after,
					&:before {
						.hide();
					}
				}
				&:nth-child(even) {
					&:before {
						left: -100%;
					}
					&:after {
						left: 0;
					}
				}
			}
		}
	}
	&.dfd_timeline_horisontal {}
}