@import 'mixins';

hr {
	border: 0;
	position: relative;
	width: 100%;
	padding: 3px 0;
	display: inline-block;
}
hr:before { 
	height: 1px; 
	content: '';
	position: absolute;
	background: rgba($grey, 0.2);
	width: 100%;
	left: 0;
	margin: 0 auto;
}
hr {
	&.turquoise:before {
		background: rgba($dark-turquoise, 0.3);
	}
	&.orange:before {
		background: $oj;
	}
}
hr.skinny {
	left: 50%;
	margin-left: -35%;
	width: 70%;
}
hr:before { 
	height: 1px; 
	content: '';
	position: absolute;
	background: rgba($grey, 0.2);
	width: 100%;
	left: 0;
}
hr.doubleLines {
	padding: 0;
	border: 0;
	position: relative;
	width: 100%;
}
hr.doubleLines.white:before,
hr.doubleLines.white:after {
	background: rgba(white, 0.8);
}
hr.doubleLines:before,
hr.doubleLines:after {
	content: '';
	position: absolute;
	background: $shark;
	width: 100%;
	left: 0;
}
hr.doubleLines:before { 
	height: 2px; 
}
hr.doubleLines:after {
	height: 1px;
	margin-top: 5px;
}
hr.flat {
	display: block;
	margin: 0;
	padding: 6px 0;
}
@mixin hr-with-symbols($content){
	margin: 0;
	padding: 0;
	&:before {
		position: relative;
		height: initial;
		display: block;
		content: $content;
		background: none;
		text-align: center;
		font-size: 20px;
		letter-spacing: 8px;
		@include opacity(0.5);
	}
}
hr.diamonds {
	@include hr-with-symbols('\25C6 \25C6 \25C6');
}
hr.dots {
	@include hr-with-symbols('\2022 \2022 \2022');
}
hr.diamonds,
hr.dots {
	&.turquoise {
		color: $dark-turquoise;
	}
	&.orange {
		color: $oj;
	}
	&.grey {
		color: grey;
	}
	&.green {
		color: $grass;
	}
}