// center vertically and/or horizontally an absolute positioned element

@mixin center($xy:xy) {
	@if $xy == xy {
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		@include qodeTransform(translateX(-50%) translateY(-50%));
	}
	@else if $xy == x {
		left: 50%;
		right: auto;
		@include qodeTransform(translateX(-50%));
	}
	@else if $xy == y {
		top: 50%;
		bottom: auto;
		@include qodeTransform(translateY(-50%));
	}
}

$S:     480px;
$M:     768px;
$L:     1100px;

// media queries

@mixin MQ($canvas) {
	@if $canvas == S {
		@media only screen and (min-width: $S) { @content; }
	}
	@else if $canvas == M {
		@media only screen and (min-width: $M) { @content; }
	}
	@else if $canvas == L {
		@media only screen and (min-width: $L) { @content; }
	}
}

.qode-horizontal-timeline {
	opacity: 0;
	@include qodeTransition(opacity .2s);

	&::before {
		/* never visible - this is used in jQuery to check the current MQ */
		content: 'mobile';
		display: none;
	}

	&.loaded {
		/* show the timeline after events position has been set (using JavaScript) */
		opacity: 1;
	}

	.qode-timeline {
		position: relative;
		height: 100px;
		margin: 0 auto;
	}

	.qode-events-wrapper {
		position: relative;
		height: 100%;
		margin: 0 40px;
		overflow: hidden;

		.qode-events {
			/* this is the grey line/timeline */
			position: absolute;
			z-index: 1;
			left: 0;
			top: 49px;
			height: 3px;
			/* width will be set using JavaScript */
			background: #e4e4e4;
			@include qodeTransition(transform .4s);

			.qode-filling-line {
				/* this is used to create the green line filling the timeline */
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				@include qodeTransform(scaleX(0));
				-webkit-transform-origin: left center;
				-moz-transform-origin: left center;
				-ms-transform-origin: left center; // IE9 only
				transform-origin: left center;
				background: $first-main-color;
				@include qodeTransition(transform .3s);
			}

			ol {
				list-style: none;
				margin: 0;
			}

			a {
				position: absolute;
				bottom: 0;
				z-index: 2;
				text-align: center;
				font-size: 20px;
				padding-bottom: 19px;
				text-transform: uppercase;
				/* fix bug on Safari - text flickering while timeline translates */
				@include qodeTransform(translateZ(0));

				.circle-outer {
					/* this is used to create the event spot */
					content: '';
					position: absolute;
					left: 50%;
					right: auto;
					@include qodeTransform(translateX(-50%));
					bottom: -4px;
					height: 12px;
					width: 12px;
					border-radius: 50%;
					background-color: $first-main-color;
					@include qodeTransition(all 0.25s ease-out);
					@include qodeBoxShadowCustom(0.5px 0.866px 1px 0px rgba( 0, 0, 0, 0.1 ));
				}

				.no-touch &:hover .circle-outer {
					background-color: $first-main-color;
				}

				&.selected {
					pointer-events: none;

					.circle-outer {
						@include qodeTransform(translateX(-50%) scale(1.2));
						background: $first-main-color;
					}
				}

				/*&.older-event::after {
					border-color: $first-main-color;
				}*/
			}
		}
	}

	.qode-timeline-navigation {
		list-style: none;
		margin: 0;
		a {
			/* these are the left/right arrows to navigate the timeline */
			position: absolute;
			z-index: 1;
			@include center(y);
			height: 34px;
			width: 34px;
			line-height: 34px;
			border-radius: 50%;
			color: #dadada;
			text-align: center;

			&.qode-prev {
				left: 0;
				color: $first-main-color;

				&::after {
					/* arrow icon */
					content: "\34";
					display: inline-block;
					font-size: 24px;
					font-family: ElegantIcons;
				}
			}

			&.qode-next {
				right: 0;
				color: $first-main-color;

				&::after {
					/* arrow icon */
					content: "\35";
					display: inline-block;
					font-size: 24px;
					font-family: ElegantIcons;
				}
			}

			&.inactive {
				cursor: not-allowed;
			}
		}
	}

	.qode-dots {
		height: 3px;
		background-image: radial-gradient(circle closest-side,#d2d2d2 99%,transparent 100%);
		background-position: 50% 70%;
		background-size: 20px 3px;
		background-repeat: repeat-x;
		position: relative;
		width: 100%;
		top: -2px;
		display: none;
	}

	.qode-events-content {
		position: relative;
		width: 100%;
		margin-top: 40px;
		overflow: hidden;
		@include qodeTransition(height .4s);

		> ol {
			list-style: none;
			margin: 0;
		}

		> ol > li {
			position: absolute;
			z-index: 1;
			width: 100%;
			left: 0;
			top: 0;
			@include qodeTransform(translateX(-100%));
			opacity: 0;
			-webkit-animation-duration: .4s;
			animation-duration: .4s;
			-webkit-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;

			&.selected {
				/* visible event content */
				position: relative;
				z-index: 2;
				opacity: 1;
				@include qodeTransform(translateX(0));
			}

			&.qode-enter-right, &.qode-leave-right {
				@include qodeAnimation(qode-enter-right .4s ease-in-out);
			}

			&.qode-enter-left,  &.qode-leave-left {
				@include qodeAnimation(qode-enter-left .4s ease-in-out);
			}

			&.qode-leave-right, &.qode-leave-left {
				-webkit-animation-direction: reverse;
				animation-direction: reverse;
			}
		}

		.qode-hti-content-inner {
			@include qodeTableLayout();
			box-sizing: border-box;
			padding: 6px;

			.qode-hti-content-inner-shadow {
				overflow: hidden;
			}
		}

		.qode-hti-content-image {
			position: relative;
			display: table-cell;
			height: 100%;
			width: 50%;
			vertical-align: middle;
			text-align: center;
			line-height: 0;
		}

		.qode-hti-content-value {
			@include qodeTableCellLayout();
			width: 50%;
			text-align: left;
			padding: 30px 45px;
			border-left: none;
		}

	}

	@include MQ(L) {

		&::before {
			/* never visible - this is used in jQuery to check the current MQ */
			content: 'desktop';
		}
	}

	&.qode-timeline-bottom {

		.qode-events-content {
			margin-top: 0;
			margin-bottom: 105px;
		}
	}
}


@include keyframes(qode-enter-right) {
	0% {
		opacity: 0;
		@include qodeTransform(translateX(100%));
	}

	100% {
		opacity: 1;
		@include qodeTransform(translateX(0%));
	}
}

@include keyframes(qode-enter-left) {
	0% {
		opacity: 0;
		@include qodeTransform(translateX(-100%));
	}

	100% {
		opacity: 1;
		@include qodeTransform(translateX(0%));
	}
}
