/* 
    Created on : 16.08.2016, 17:35:28
    Author     : DFD
	Styles for : Gadation & Short Info Block shortcodes
*/

.dfd-milestone-wrap {
	.rel();
	.dfd-milestone-list {
		.rel();
		margin-bottom: 0;
		list-style: none;
	}
	.icon-centered-container {
		.rel();
	}
	.icon-wrap {
		.rel();
		text-align: center;
		font-size: 27px;
		.transition(color .3s ease);
		&:before,
		&:after {
			content: "";
			.abs();
			.block();
			background: @border-color;
		}
	}
	.icon-decoration {
		.rel();
		.block();
		width: inherit;
		height: inherit;
		line-height: inherit;
		overflow: hidden;
		.rounded(50%);
		z-index: 1;
		i {
			.rel();
			.block();
			line-height: inherit;
		}
		.icon-text {
			.rel();
		}
		img {
			.abs();
			.block();
			top: 50%;
			left: 50%;
			.translate(-50%; -50%);
			max-width: initial;
		}
		&:before {
			content: "";
			.abs();
			.block();
			top: 1px;
			right: 1px;
			bottom: 1px;
			left: 1px;
			border: 2px solid @main-site-light-color;
			.rounded(inherit);
			.transition(~"background .3s ease, border-color .3s ease");
		}
	}
	.title-wrap {
		padding-bottom: 20px;
		.dfd-content-title-big {
			line-height: 1.3;
		}
		.dfd-content-subtitle {
			font-size: 13px;
			color: #828282;
			line-height: 28px;
		}
	}
	.description-container {
		overflow: hidden;
	}
	.dfd-milestone-item {
		.rel();
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		&:first-child {
			.icon-wrap {
				&:before {
					.hide();
				}
			}
		}
		&:last-child {
			.icon-wrap {
				&:after {
					.hide();
				}
			}
		}
	}
	&.side-delimeter {
		.dfd-milestone-item {
			&:first-child {
				.icon-wrap {
					&:before {
						.block();
					}
				}
			}
			&:last-child {
				.icon-wrap {
					&:after {
						.block();
					}
				}
			}
		}
	}
	&.content-only-hover {
		.title-wrap {
			padding-bottom: 0;
		}
		.description-container {
			.description {
				.transform(translateY(100%));
				.transition(transform .3s ease);
			}
		}
		.dfd-milestone-item {
			&:hover {
				.description-container {
					.description {
						.transform(translateY(0));
					}
				}
			}
		}
	}
	&.style-1 {
		text-align: center;
		.icon-centered-container {
			margin: 0 auto;
		}
		.icon-wrap {
			width: inherit;
			height: inherit;
			line-height: inherit;
			&:before,
			&:after {
				top: 50%;
				height: 1px;
				width: 100em;
			}
		}
		.content-wrap {
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 20px;
		}
		&:not(.side-delimeter) {
			.quarter-width-elements {
				.dfd-milestone-item {
					&:nth-child(4n+4) {
						.icon-wrap:after {
							.hide();
						}
					}
					&:nth-child(4n+5) {
						.icon-wrap:before {
							.hide();
						}
					}
				}
			}
			.one-third-width-elements {
				.dfd-milestone-item {
					&:nth-child(3n+3) {
						.icon-wrap:after {
							.hide();
						}
					}
					&:nth-child(3n+4) {
						.icon-wrap:before {
							.hide();
						}
					}
				}
			}
			.half-size-elements {
				.dfd-milestone-item {
					&:nth-child(2n+2) {
						.icon-wrap:after {
							.hide();
						}
					}
					&:nth-child(2n+3) {
						.icon-wrap:before {
							.hide();
						}
					}
				}
			}
			.full-width-elements {
				.dfd-milestone-item {
					.icon-wrap {
						&:after,
						&:before {
							.hide();
						}
					}
				}
			}
		}
	}
	&.style-2,
	&.style-3 {
		.icon-centered-container {
			height: 100%;
		}
		.icon-wrap {
			.rel();
			top: 50%;
			&:before,
			&:after {
				width: 1px;
				height: 100em;
			}
		}
		.title-wrap {
			padding-bottom: 0;
		}
		.content-wrap {
			.rel();
			top: 50%;
			.transform(translateY(-50%));
		}
		.description-container {
			padding-top: 10px;
		}
		.dfd-milestone-item {
			padding: 25px 0;
			&:first-child {
				padding-top: 0 !important;
			}
			&:last-child {
				padding-bottom: 0 !important;
			}
		}
		&.content-only-hover {
			.content-centered-container {
				.transform(translateY(50%));
				.transition(transform .3s ease);
				.title-wrap {
					padding-bottom: 0;
					.transform(translateY(-50%));
					.transition(transform .3s ease);
				}
			}
			.dfd-milestone-item {
				&:hover {
					.content-centered-container {
						.transform(translateY(0));
						.title-wrap {
							.transform(translateY(0));
						}
					}
				}
			}
		}
		&.dfd-milestone-content-top {
			.icon-wrap {
				top: 0 !important;
				margin-top: 0 !important;
			}
			.content-wrap {
				top: 0 !important;
				.translate(0; 0);
			}
		}
	}
	&.style-2 {
		text-align: left;
		.icon-centered-container {
			float: left;
		}
		.icon-wrap {
			left: 0;
			&:before,
			&:after {
				left: 50%;
			}
		}
	}
	&.style-3 {
		text-align: right;
		.icon-centered-container {
			float: right;
		}
		.icon-wrap {
			right: 0;
			&:before,
			&:after {
				right: 50%;
			}
		}
	}
}

.dfd-milestone-wrap {
	.icon-wrap {
		width: 70px;
		height: 70px;
		line-height: 70px;
		color: @main-site-dark-color;
	}
	.title-wrap {
		padding-bottom: 0;
	}
	.icon-decoration {
		&:before {
			background: @main-site-light-color;
		}
	}
	.description-container {
		padding-top: 10px;
	}
	.dfd-milestone-item {
		&:hover {
			.icon-wrap {
				color: @title-color;
			}
			.icon-decoration {
				&:before {
					background: transparent;
				}
			}
		}
	}
	&.style-1 {
		.icon-wrap {
			&:before {
				right: 70px;
			}
			&:after {
				left: 70px;
			}
		}
		.icon-centered-container {
			width: 70px;
			height: 70px;
			line-height: 70px;
		}
	}
	&.style-2 {
		.content-wrap {
			margin-left: 95px;
		}
	}
	&.style-3 {
		.content-wrap {
			margin-right: 95px;
		}
	}
	&.style-2,
	&.style-3 {
		.icon-wrap {
			margin-top: -35px;
			&:before {
				bottom: 70px;
			}
			&:after {
				top: 70px;
			}
		}
		.icon-centered-container {
			min-height: 70px;
		}
	}
}