/* 
    Created on : 02.12.2015, 21:16:48
    Author     : DFD
	Styles for : Delimeter shortcode
*/

.dfd-delimier-wrapper {

	@width:30px;
	@height:30px;
	@border-width : 2px;
	@icon-size : 10px;
	@white-color: #ffffff;
	@dark-color: #1b1b1b;

	overflow: hidden;
    width: 100%;
	display: table;
    position: relative;
	.delim-left,
	.delim-right,
	.delim-center {
		display: table-cell;
		vertical-align: middle;
	}
	.delim-left,
	.delim-right {
		height: 1px;
		width: 50%;
		top: 50%;
		margin-top: -1px;
		.line {
			border-bottom-width:1px;
			border-bottom-style: solid;
			display: block;
			width: 100%;
		}
	}
	.delim-center {
		margin: 0 auto;
		text-align: center;
		position: relative;
		.center-arrow {
			border: @border-width solid;
			width: @width;
			height: @height;
			margin: 0 auto;
			border-radius: 50%;
			.inner-wrapper-icon {
				display: table;
				width: 100%;
				height: 100%;
				text-align: center;
			}
			i {
				font-size: @icon-size;
				vertical-align: middle;
				display: table-cell;
				color: @dark-color;
				position: relative;
				.transition(color .3s ease);
			}
		}
	}
	/*
	* Styles
	*/
	&.dfd-delimiter-with-arrow {
		padding-bottom: 15px;
		padding-top: 6px;
		.center-arrow {
			display: block;
			.transform(scale(1));
			overflow:hidden;
			.transition(~'background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease');
			.inner-wrapper-icon {
				cursor: pointer;
				i {
					color: transparent !important;
					text-shadow : 0px 0px @dark-color, 0px 150px @dark-color;
					.transition(text-shadow .2s ease);
				}
			}
			&:hover {
				border-color: transparent;
				.box-shadow(0px 4px 16px 4px rgba(0,0,0,0.15));
				.inner-wrapper-icon {
					i {
						text-shadow : 0px -150px @white-color, 0px 0px @white-color !important;
					}
				}
			}
		}
	}
	&.dfd-delimiter-with-line {
		.line {
			border-bottom-width:1px;
			border-bottom-style: solid;
			display: block;
			width: 100%;
		}
	}
	&.dfd-delimiter-with-icon {
		.center-arrow {
			border: none !important;
			margin: 0 10px;
		}
	}
	&.dfd-delimiter-with-text {
		.delim-center {
			span {
				display: inline-block;
				position: relative;
				.transition(color .3s ease);
				&:before {
					right: 100%;
					margin-right: 25px;
				}
				&:after {
					left: 100%;
					margin-left: 25px;
				}
				&:after,
				&:before {
					content: "";
					position: absolute;
					top: 50%;
					height: 1px;
					width: 9999px;
					display: block;
					border-bottom-style: solid;
				}
			}
		}
	}
	&.dfd-delimiter-with-image {
		.background-repeat {
			background-repeat: repeat-x;
		}
	}
}