@import "variables-epic.less";
@import "../../vendor/bower/bootstrap/less/mixins.less";

.parallax(@backround-color, @backround-image){
	background: @backround-color @backround-image;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}

.mirror-flip(){
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.custom-link-color(@color, @hover-color){
	color: @color;
	&:hover{
		color: @hover-color;
	}
}

.common-boxed(@background, @padding, @margin){
	background: @background;
	padding: @padding;
	margin: @margin;
}

.fw-margin(@margin-left, @margin-right){
	margin-right: @margin-right;
	margin-left: @margin-left;
}

.rounded-icon(@font-size, @padding, @border-size, @border-style, @border-radius){
	font-size: @font-size;
	border: @border-size @border-style;
	border-radius: @border-radius;
	padding: @padding;
}

// Arrow Flag  */
.left-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	height: @size;

	&:before, &:after{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: @color transparent;
		top: 0;
	}

	&:before{
		left: -@size/2;
		border-width: @size/2 0 @size/2 @size/2;
	}
}

.right-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	height: @size;

	&:before, &:after{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: @color transparent;
		top: 0;
	}

	&:after{
		right: -@size/2;
		border-width: @size/2 @size/2 @size/2 0;
	}
}

.left-right-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	height: @size;

	&:before, &:after{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: @color transparent;
		top: 0;
	}
	
	&:before{
		left: -@size/2;
		border-width: @size/2 0 @size/2 @size/2;
	}

	&:after{
		right: -@size/2;
		border-width: @size/2 @size/2 @size/2 0;
	}
}

.up-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	width: @size;

	&:before{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: transparent @color;
		left: 0;
	}

	&:before{
		top: -@size/2;
		border-width: @size/2 @size/2 0 @size/2;
	}
}

.down-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	width: @size;

	&:before{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: transparent @color;
		left: 0;
	}

	&:before{
		bottom: -@size/2;
		border-width: 0 @size/2 @size/2 @size/2;
	}
}

.up-down-flag(@size:40px, @color:#CCC, @wrap-color: darken(@color,5%)){
	// general styles for all elements */
	position: relative;
	background: @color;
	width: @size;

	&:before, &:after{
		border-style: solid;
		height: 0;
		width: 0;
		display: block;
		content:"";
		position: absolute;

		border-color: transparent @color;
		left: 0;
	}
	

	&:before{
		top: -@size/2;
		border-width: @size/2 @size/2 0 @size/2;
	}

	&:after{
		bottom: -@size/2;
		border-width: 0 @size/2 @size/2 @size/2;
	}
}

// Traingle mixin for arrow button */

.triangle-base() {
	content: '';
	display: block;
	width: 0;
	height: 0;
	-moz-transform: scale(.9999);
}

.triangle(@direction, @size, @color) {
	.triangle(@direction, @size * 2, @size, @color);
}

.triangle(@direction, @width, @height, @color) when (@direction = up) {
	.triangle-base();
	border-left: (@width / 2) solid transparent;
	border-right: (@width / 2) solid transparent;
	border-bottom: @height solid @color;
}

.triangle(@direction, @width, @height, @color) when (@direction = down) {
	.triangle-base();
	border-left: (@width / 2) solid transparent;
	border-right: (@width / 2) solid transparent;
	border-top: @height solid @color;
}

.triangle(@direction, @width, @height, @color) when (@direction = left) {
	.triangle-base();
	border-top: (@width / 2) solid transparent;
	border-bottom: (@width / 2) solid transparent;
	border-right: @height solid @color;
}

.triangle(@direction, @width, @height, @color) when (@direction = right) {
	.triangle-base();
	border-top: (@width / 2) solid transparent;
	border-bottom: (@width / 2) solid transparent;
	border-left: @height solid @color;
}

.global-boxed(){
	.common-boxed(@main-bg, 2rem 3rem, 0 0 3rem 0);
	box-shadow: 0 2px 1px #ccc;
	border: 1px solid rgba(204, 204, 204, 0.25);
}