@import "ie-prefixer";

// Animation
.animation(@args) {
	-webkit-animation: @args;
	animation: @args;
}
.animation-delay(@delay) {
	-webkit-animation-delay: @delay;
	animation-delay: @delay;
}
.animation-direction(@direction) {
	-webkit-animation-direction: @direction;
	animation-direction: @direction;
}
.animation-duration(@duration) {
	-webkit-animation-duration: @duration;
	animation-duration: @duration;
}
.animation-iteration-count(@count) {
	-webkit-animation-iteration-count: @count;
	animation-iteration-count: @count;
}
.animation-name(@name) {
	-webkit-animation-name: @name;
	animation-name: @name;
}
.animation-play-state(@state) {
	-webkit-animation-play-state: @state;
	animation-play-state: @state;
}
.animation-timing-function(@function) {
	-webkit-animation-timing-function: @function;
	animation-timing-function: @function;
}
.animation-fill-mode(@fill-mode) {
	-webkit-animation-fill-mode: @fill-mode;
	animation-timing-fill-mode: @fill-mode;
}


// Background Size

.background-size(@arg:auto) {
	-webkit-background-size: @arg;
	-moz-background-size: @arg;
	background-size: @arg;
}


// Border Radius

.border-radius(@args) {
	border-radius: @args;
	background-clip: padding-box;
}


// Border Image
.border-image(@args) {
	-webkit-border-image: @args;
		 -o-border-image: @args;
			border-image: @args;
}

// Box Sizing
.box-sizing(@args){
	-moz-box-sizing: @args;
	box-sizing: @args;
}
.border-box(){
	.box-sizing(border-box);
}
.content-box(){
	.box-sizing(content-box);
}

// CSS filters
.filter(@args) {
	-webkit-filter: @args;
	-moz-filter: @args;
	-ms-filter: @args;
	-o-filter: @args;
	filter: @args;
}



// Columns
.columns(@args){
	-webkit-columns: @args;
	-moz-columns: @args;
	columns: @args;
}
.column-count(@count) {
	-webkit-column-count: @count;
	-moz-column-count: @count;
	column-count: @count;
}
.column-gap(@gap) {
	-webkit-column-gap: @gap;
	-moz-column-gap: @gap;
	column-gap: @gap;
}
.column-width(@width){
	-webkit-column-width: @width;
	-moz-column-width: @width;
	column-width: @width;
}
.column-rule(@args){
	-webkit-column-rule: @rule;
	-moz-column-rule: @rule;
	column-rule: @rule;
}


// Gradients
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
	.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
	background-color: @default;
	background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
	background-image: linear-gradient(to bottom, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
	background-color: @default;
	background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
	background-image: linear-gradient(to bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
	background-color: @default;
	background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
	background-image: linear-gradient(to bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
	background-color: @default;
	background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
	background-image: linear-gradient(to right, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
	background-color: @default;
	background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
	background-image: linear-gradient(to right, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
	background-color: @default;
	background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
	background-image: linear-gradient(to right, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}

// Transforms

.transform(@args) {
	-webkit-transform: @args;
	-ms-transform: @args;
	transform: @args;
}
.rotate(@deg:45deg){
	.transform(rotate(@deg));
}
.scale(@factor:.5){
	.transform(scale(@factor));
}
.translate(@x,@y){
	.transform(translate(@x,@y));
}
.translateX(@x){
	.transform(translateX(@x));
}
.translateY(@y){
	.transform(translateY(@y));
}
.translateZ(@z){
	.transform(translateZ(@z));
}
.translate3d(@x,@y,@z) {
	.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y){
	-webkit-transform: translate3d(@x,@y,0);
	-ms-transform: translate(@x,@y);
	transform: translate(@x,@y);
	transform: translate3d(@x,@y,0);
}

.transform-origin(@args) {
	-webkit-transform-origin: @args;
		-ms-transform-origin: @args;
			transform-origin: @args;
}

.transform-style(@args) {
	-webkit-transform-style: @args;
		-ms-transform-style: @args;
			transform-style: @args;
}


// Transitions

.transition(@args:200ms) {
	-webkit-transition: @args;
	transition: @args;
}
.transition-delay(@delay:0) {
	-webkit-transition-delay: @delay;
	transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
	-webkit-transition-duration: @duration;
	transition-duration: @duration;
}
.transition-property(@property:all) {
	-webkit-transition-property: @property;
	transition-property: @property;
}
.transition-timing-function(@function:ease) {
	-webkit-transition-timing-function: @function;
	transition-timing-function: @function;
}

// other

.rgba-bg(@color:transparent) when (iscolor(@color)) and (alpha(@color) < 1) {
	background-color: @color;
	.ie8 & {
		zoom: 1;
		background-color: transparent;
		.ms-filter-gradient(@color);
	}
}

.rgba-bg(@color) when not(iscolor(@color)) {
	.rgba-bg(rgba(0, 0, 0, 0));
}

.rgba-bg(@color:transparent) {
	background-color: @color;
}

.bg-color(@color) when (iscolor(@color)) and (alpha(@color) < 1) {
	@noAlpha: hsl(hue(@color), saturation(@color), lightness(@color));
	background-color: @noAlpha; // IE8
	background-color: @color;
}

.bg-color(@color) when (iscolor(@color)) and (alpha(@color) = 1) {
	background-color: @color;
}

.bg-color(@color:transparent) {
	background-color: @color;
}

.bg (@url, @repeat:repeat, @position:center, @attachment:scroll, @color:transparent, @size:auto)
when (isstring(@url)) {
	background: url(@{url}) @repeat @position @attachment;
	.bg-color(@color);
	.background-size(@size);
}

.bg (@url, @repeat:repeat, @position:center, @attachment:scroll, @color:transparent, @size:auto)
when not (isstring(@url)) {
	background-repeat: @repeat;
	background-position: @position;
	background-attachment: @attachment;
	.bg-color(@color);
	.background-size(@size);
}

// Generates colors from the given basecolor
// -----------------------------------------------------------------------------



.readable-color(@bgcolor:#FFF, @treshold:70, @diff:50%) when ( iscolor(@bgcolor) ) and ( lightness(@bgcolor) >= @treshold ) and ( alpha(@bgcolor) > 0 ) {
	color: darken(@bgcolor, @diff);
}
.readable-color(@bgcolor:#FFF, @treshold:70, @diff:50%) when ( iscolor(@bgcolor) ) and ( lightness(@bgcolor) < @treshold ) and ( alpha(@bgcolor) > 0 ) {
	color: lighten(@bgcolor, @diff);
}
.readable-color(@bgcolor, @treshold:70, @diff:50%) when not ( iscolor( @bgcolor ) ), ( alpha(@bgcolor) = 0 ) {
}
.readable-border(@bgcolor:#FFF, @treshold:70, @diff:50%) when ( iscolor( @bgcolor ) ) and ( lightness(@bgcolor) >= @treshold ) and ( alpha(@bgcolor) > 0 ) {
	border-color: darken(@bgcolor, @diff);
}
.readable-border(@bgcolor:#FFF, @treshold:70, @diff:50%) when ( iscolor( @bgcolor ) ) and ( lightness(@bgcolor) < @treshold ) and ( alpha(@bgcolor) > 0 ) {
	border-color: lighten(@bgcolor, @diff);
}
.readable-border(@bgcolor, @treshold:70, @diff:50%) when not ( iscolor( @bgcolor ) ), ( alpha(@bgcolor) = 0 ) {
}


// -----------------------------------------------------------------------------

.background-color-from-page-bg(@color:@main-background-color, @secondcolor:@body-background-color) {
	background-color: @color;
}
.background-color-from-page-bg(@color:@main-background-color, @secondcolor:@body-background-color) when not (iscolor(@color)) {
	.background-color-from-page-bg(@secondcolor);
}
.background-color-from-page-bg(@color:@main-background-color, @secondcolor:@body-background-color) when not (iscolor(@color)) and not (iscolor(@secondcolor)) {
	.background-color-from-page-bg(#FFF);
}

.background-origin(@arg) {
	-webkit-background-origin: @arg;
			background-origin: @arg;
}

/* Fonts -------------------------------------------------------------------- */
.wpv-font(@prefix:primary-font-) {
	@font-weight : e("@{prefix}weight");
	@font-size: e("@{prefix}size");
	@line-height: e("@{prefix}lheight");
	@font-family: e("@{prefix}face");

	font: e(%('%s %s/%s "%s"', @@font-weight, @@font-size, @@line-height, @@font-family));
}
.wpv-font-no-weight(@prefix:primary-font-) {
	@font-size: e("@{prefix}size");
	@line-height: e("@{prefix}lheight");
	@font-family: e("@{prefix}face");

	font: e(%('%s/%s "%s"', @@font-size, @@line-height, @@font-family));
}
.wpv-color(@prefix:primary-font-) {
	@color : e("@{prefix}color");
	color  : @@color;
}

.formElementColors(@color:@main-background-color) when (iscolor(@color)) {
	@bg : lighten(@color, 8%);

	background-color: @bg;
	.readable-color(@bg);
	&::-webkit-input-placeholder {
		.readable-color(@bg, 70, 30%);
	}
	&:-ms-input-placeholder {
		.readable-color(@bg, 70, 30%);
	}
	&::placeholder {
		.readable-color(@bg, 70, 30%);
	}
}
