// simple mixins for exponent style sheets

// Mixin
.border-radius (@radius: 5px) {
	-webkit-border-radius : @radius;
	-moz-border-radius    : @radius;
	border-radius         : @radius;
}
// Implementation
//#somediv {
//    .border-radius(20px);
//}

// Mixin
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius : @topleft @topright @bottomright @bottomleft;
	-moz-border-radius    : @topleft @topright @bottomright @bottomleft;
	border-radius         : @topleft @topright @bottomright @bottomleft;
}
// Implementation
//#somediv {
//    .border-radius-custom(20px, 20px, 0px, 0px);
//}

// Mixin
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
	-webkit-box-shadow : @x @y @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow    : @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow         : @x @y @blur rgba(0, 0, 0, @alpha);
}
// Implementation
//#somediv {
//    .box-shadow(5px, 5px, 6px, 0.3);
//}

// Mixin
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition : @prop @time @ease;
	-moz-transition    : @prop @time @ease;
	-o-transition      : @prop @time @ease;
	-ms-transition     : @prop @time @ease;
	transition         : @prop @time @ease;
}
// Implementation
//#somediv {
//    .transition(all, 0.5s, ease-in);
//}
//
//#somediv:hover {
//    opacity: 0;
//}

// Mixin
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform : rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform    : rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform      : rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform     : rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform         : rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
// Implementation
//#someDiv {
//    .transform(5deg, 0.5, 1deg, 0px);
//}

// Mixin
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color : @start;
	background-image : -webkit-linear-gradient(@origin, @start, @stop);
	background-image : -moz-linear-gradient(@origin, @start, @stop);
	background-image : -o-linear-gradient(@origin, @start, @stop);
	background-image : -ms-linear-gradient(@origin, @start, @stop);
	background-image : linear-gradient(@origin, @start, @stop);
}
// Implementation
//#someDiv {
//    .gradient(left, #663333, #333333);
//}

// Mixin
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image : -webkit-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
	background-image : -moz-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
	background-image : -o-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
	background-image : -ms-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
	background-image : linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
}
// Implementation
//#somediv {
//    background-color: BADA55;
//    .quick-gradient(top, 0.2);
//}

// Mixin
.linear-gradient( @dir: top, @start-color: #eee, @end-color: #aaa ) {
	background: -webkit-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -moz-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -ms-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -o-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: linear-gradient(@dir, @start-color 0%, @end-color 100%);
	.linear-gradient-ie( @dir, @start-color, @end-color);
}
.linear-gradient-multi( ... ) {
	background-image: -webkit-linear-gradient(@arguments);
	background-image: -moz-linear-gradient(@arguments);
	background-image: -ms-linear-gradient(@arguments);
	background-image: -o-linear-gradient(@arguments);
	background-image: linear-gradient(@arguments);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = top),
	not ( isstring(@dir) ) and ( @dir >= 225 ) and ( @dir < 315 ),
	not ( isstring(@dir) ) and ( @dir >= -135 ) and ( @dir < -45 ) {
	.linear-gradient-ie-filter(@start-color, @end-color, 0);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = right),
	not ( isstring(@dir) ) and ( @dir >= 135 ) and ( @dir < 225 ),
	not ( isstring(@dir) ) and ( @dir >= -225 ) and ( @dir < -135 ) {
	.linear-gradient-ie-filter(@end-color, @start-color, 1);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = bottom),
	not ( isstring(@dir) ) and ( @dir >= 45 ) and ( @dir < 135 ),
	not ( isstring(@dir) ) and ( @dir >= -315 ) and ( @dir < -225 ) {
	.linear-gradient-ie-filter(@end-color, @start-color, 0);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = left),
	not ( isstring(@dir) ) and ( @dir >= 315 ) and ( @dir < 360 ),
	not ( isstring(@dir) ) and ( @dir >= -45 ) and ( @dir < 45 ),
	not ( isstring(@dir) ) and ( @dir < -315 ) and ( @dir >= -360 ) {
	.linear-gradient-ie-filter(@start-color, @end-color, 1);
}
.linear-gradient-ie-filter(@start: #eee, @end: #aaa, @type: 1) {
	@c-start: argb(@start);
	@c-end: argb(@end);
	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}', endColorstr='@{c-end}', GradientType=@{type})";
	-ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}',endColorstr='@{c-end}',GradientType=@{type})";
}
// Implementation
//#somediv {
//    .linear-gradient(top, #eee, #aaa);
//}

// Mixin
.reflect (@length: 50%, @opacity: 0.2) {
	-webkit-box-reflect : below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255, 255, 255,@opacity)));
}
// Implementation
//#somediv {
//    .reflect(20%, 0.2);
//}

// Mixin
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

// Mixin
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}

// Mixin
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

// Mixin
.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}

// Mixin
.rotation(@deg:5deg){
  .transform(rotate(@deg));
}

// Mixin
.scale(@ratio:1.5){
  .transform(scale(@ratio));
}

// Mixin
.skew(@angle_x:35, @angle_y:0){
  .transform(skew(@angle_x, @angle_y));
}

// Mixin
.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}

// Mixin
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

// Mixin
.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

// Mixin
.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}

// Mixin
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}

// Mixin
.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

// Mixin
//// Font size with 100% base
// More at http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
.font-size( @sizeValue ) {
  @remValue: (@sizeValue * 0.625);
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px";
  font-size: ~"@{remValue}rem";
}
