/* shortcuts */
// clearing floats like a boss h5bp.com/q
.clearfix {
	&::before,
	&::after {
		display: table;
		content: "";
	}
	
	&::after {
		clear: both;
	}
}

.square(@size) {
	height: @size;
	width: @size;
}


// sets default text shadows depending on background color
.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 40%) {
	text-shadow: 0 1px 0 @wcfTextShadowLightColor;
}
.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
	text-shadow: 0 -1px 0 @wcfTextShadowDarkColor;
}

/* CSS 3 */
.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2) {
	background-color: @backgroundColor;
	background-image: -webkit-linear-gradient(@gradientColor1, @gradientColor2);
	background-image: linear-gradient(@gradientColor1, @gradientColor2);
}

.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2, @gradientColor3, @direction: 180deg) {
	@oldDirection: @direction - 90deg;
	background-color: @backgroundColor;
	background-image: -webkit-linear-gradient(@oldDirection, @gradientColor1, @gradientColor2, @gradientColor3);
	background-image: linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
}

.linearGradientNative(@parameters) {
	background-image: -webkit-linear-gradient(@parameters);
	background-image: linear-gradient(@parameters);
}

.transition(@property, @duration, @type: linear) {
	-webkit-transition-property: @property;
	transition-property: @property;
	
	-webkit-transition-duration: @duration;
	transition-duration: @duration;
	
	-webkit-transition-timing-function: @type;
	transition-timing-function: @type;
}

.boxShadow(@leftOffset, @topOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
	box-shadow: @leftOffset @topOffset @blurriness @shadowHeight @color;
}

.boxShadowInset(@leftOffset, @topOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
	box-shadow: inset @leftOffset @topOffset @blurriness @shadowHeight @color;
}

.boxShadowNative(@parameters) {
	box-shadow: @parameters;
}