// MIXINS
//----- MIXINS FOR MIXINS -----------------------------//


//----- COLOR -----------------------------------------//

.overlay-white(@percent; @color; @shade: none) {
	@white: rgba(255, 255, 255, @percent);

	.get-output(@shade) when (@shade = lighter) {
		@overlay-white-lighter: screen(@color, @white);
	}
	.get-output(@shade) when (@shade = darker) {
		@overlay-white-darker: screen(@color, @white);
	}
	.get-output(@shade) when (default()) {
		@overlay-white: screen(@color, @white);
	}
	.get-output(@shade);
}
.overlay-black(@percent; @color; @shade: none) {
	@black: rgba(0, 0, 0, @percent);

	.get-output(@shade) when (@shade = lighter) {
		@overlay-black-lighter: multiply(@color, @black);
	}
	.get-output(@shade) when (@shade = darker) {
		@overlay-black-darker: multiply(@color, @black);
	}
	.get-output(@shade) when (default()) {
		@overlay-black: multiply(@color, @black);
	}
	.get-output(@shade);
}


//----- CLEAR -----------------------------------------//

.clear() {
	clear: both;
}


//----- CLEARFIX --------------------------------------//

// ie7
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		line-height: 0;
		content: "";
	}
	&::before,
	&::after {
		display: table;
		line-height: 0;
		content: "";
	}
	&:after {
		clear: both;
	}
	&::after {
		clear: both;
	}
}


//----- SINGLE LINE --------------------------------------//

.single-line {
	overflow: hidden;

	white-space: nowrap;
}


//----- HIDDEN THINGS ---------------------------------//

// do not display (inaccessible by screen readers)
.display-none() {
	display: none;
}

// hidden (accessible by screen readers)
.hidden {
	position: absolute !important;
	display: none;
	width: (@px * .1); 
	height: (@px * .1);
	clip: rect((@px * .1) (@px * .1) (@px * .1) (@px * .1)); // IE6, IE7
	clip: rect((@px * .1), (@px * .1), (@px * .1), (@px * .1));
	overflow: hidden;
}
.off-page {
	display: inline-block;
	font-size: 0;
	text-indent: -99999px
}

//----- VISIBLE THINGS ---------------------------------//

.list-item-visible() {
	display: table-cell;

	vertical-align: middle;
}


//----- BUTTON GRADIENT ----------------------------//

.btngrade(@top, @bottom) {
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @bottom), color-stop(1, @top));
	background-image: -moz-linear-gradient(center bottom, @bottom 0%, @top 100%);
	background-image:  -ms-linear-gradient(bottom, @bottom, @top);
	background-image:   -o-linear-gradient(@top, @bottom);
	background-image:      linear-gradient(@top, @bottom);
	filter: e(%("progid:DXImageTransform.Microsoft.newgradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@top,@bottom));
}


//----- FONTS --------------------------------------//

.fontfamily(@ff) {
	& when (@ff = sans) {
		font-family: Helvetica, Arial, sans-serif;
	}
	& when (@ff = serif) {
		font-family: Georgia, serif;
	}
	& when (@ff = lucida) {
		font-family: "Lucida Grande", sans-serif;
	}
	& when (@ff = tahoma) {
		font-family: Tahoma, sans-serif;
	}
	& when (@ff = mono) {
		font-family: monospace;
	}
	& when (@ff = code) {
		font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
	}
}
.fontsize(@sizeValue) {
	@remValue: @sizeValue;
	@pxValue: (@sizeValue * 10);
	font-size: unit(@pxValue,px); // fallback for IE8
	font-size: unit(@remValue,rem); // REMs for awesome browsers
}
.lh(@n: 0; @s: px) when (@s = px), (@s = em), (@s = rem) {
	line-height: unit(@n, @s);
}
.lh(@n: 0; @s: px) when (@s = pct) {
	line-height: percentage(@n/100);
}


//----- HEADINGS --------------------------------------//

.headings(@num, @index: 1) when (@index <= @num) {

	@size: @h1-size, @h2-size, @h3-size, @h4-size, @h5-size, @h6-size;
	@vars: @h1-line-height, @h2-line-height, @h3-line-height, @h4-line-height, @h5-line-height, @h6-line-height;

	@sizeVal: extract(@size, @index);
	@varVal: extract(@vars, @index);

	h@{index} {

		margin-top: 0;

		& when (@index = 1) {
			margin-bottom: 20px;
		}
		& when (@index = 2), (@index = 4), (@index = 5), (@index = 6) {
			margin-bottom: 20px;
		}
		& when (@index = 3) {
			margin-bottom: 10px;
		}
		.fontsize(@sizeVal);
		& when (@index = 1), (@index = 2), (@index = 3), (@index = 4), (@index = 5), (@index = 6) {
			font-weight: bold;
		}
		& when (@index = 6) {
			font-style: italic;
		}
		color: @colorP2;
		line-height: @varVal;

		> a,
		> a:visited,
		> a:focus,
		> a:active {
			color: @link-color;
			text-decoration: @link-decoration;
		}
		> a:visited {
			color: @link-color-visited;
			text-decoration: @link-decoration-visited;
		}
		> a:hover {
			color: @link-color-hover;
		}
		> a:focus {
			text-decoration: @link-decoration-focus;
		}
	}
	.headings(@num, (@index + 1));
}


//----- BOX SIZING ------------------------------------//

.box(@sizing) {
	& when (@sizing = content), (@sizing = border) {
		// should take either CONTENT or BORDER
		-webkit-box-sizing: escape("@{sizing}-box"); // Safari/Chrome, other WebKit
		   -moz-box-sizing: escape("@{sizing}-box"); // Firefox, other Gecko
		        box-sizing: escape("@{sizing}-box"); // Opera/IE 8+
	}
	& when (@sizing = inherit) {
		-webkit-box-sizing: escape("@{sizing}"); // Safari/Chrome, other WebKit
		   -moz-box-sizing: escape("@{sizing}"); // Firefox, other Gecko
		        box-sizing: escape("@{sizing}"); // Opera/IE 8+
	}
}


//----- BORDER RADIUS ----------------------------------------//

// set default value
@radius-sd: px;
.radius(@n: unit(@radius); @s: @radius-sd) when (@n = 0) {
	-moz-border-radius: @n;
	     border-radius: @n;
}
.radius(@n: unit(@radius); @s: @radius-sd) when not (@n = 0) {
	-moz-border-radius: unit(@n, @s);
	     border-radius: unit(@n, @s);
}

//----- TRANSPORT -------------------------------------//

.transport-top(@w: (@px * .5)) {
	margin-top: -(@w / 2);
	margin-bottom: (@w / 2);
	border-right-width: @w;
	border-bottom-width: @w;
	border-left-width: @w;
}
.transport-right(@w: (@px * .5)) {
	margin-right: -(@w / 2);
	margin-left: (@w / 2);
	border-top-width: @w;
	border-bottom-width: @w;
	border-left-width: @w;
}
.transport-bottom(@w: (@px * .5)) {
	margin-top: -(@w / 2);
	margin-bottom: (@w / 2);
	border-top-width: @w;
	border-right-width: @w;
	border-left-width: @w;
}
.transport-left(@w: (@px * .5)) {
	margin-right: -(@w / 2);
	margin-left: (@w / 2);
	border-top-width: @w;
	border-right-width: @w;
	border-bottom-width: @w;
}


//----- COLUMNS ---------------------------------------//
.column(@n: 1) {
	-webkit-column-count: @n;
	   -moz-column-count: @n;
	        column-count: @n;

}
.column-gap(@n: 0) {
	-webkit-column-gap: @n;
	   -moz-column-gap: @n;
	        column-gap: @n;
}
.column-break() {
	-webkit-column-break-inside:avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}


//----- ROTATION --------------------------------------//

.rotate(@num) {
	@div: 100;
	@IE8rot: @num/@div;

	// USING THIS BIT OF LESS
	// unit(@dimension, [@unit: ""]);
	// remove or change the unit of a dimension

	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=@IE8rot); // IE8 and lower
	-webkit-transform: rotate(unit(@num, deg)); // Safari
	   -moz-transform: rotate( unit(@num, deg) ); // Mozilla
	    -ms-transform: rotate( unit(@num, deg) ); // IE 9 and higher
	     -o-transform: rotate( unit(@num, deg) ); // Opera
	        transform: rotate( unit(@num, deg) );
}


//----- POSITION --------------------------------------//

.pos(@pos: relative) when (@pos = absolute), (@pos = fixed), (@pos = inherit), (@pos = relative), (@pos = static) {
	position: @pos;
}


//----- GRADIENTS ----------------------------------------//

.gradient(@color: @colorP3) {
	@top: fadeout(@color, 50%);
	@bottom: @color;
	background: @color;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @bottom), color-stop(1, @top));
	background: -moz-linear-gradient(center bottom, @bottom 0%, @top 100%);
	background:  -ms-linear-gradient(bottom, @bottom, @top);
	background:   -o-linear-gradient(@top, @bottom);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@top,@bottom));
}


//----- TRUNCATE ----------------------------------------//

.truncate() {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


//----- USER SELECT -------------------------------------//

.userselect {
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
}


//----- RTL ---------------------------------------------//
.international(@dir, @uni) {
	direction: @dir;
	unicode-bidi: @uni;
}


//----- FIXED WIDTH COLUMNS -----------------------------//
// takes two arguments, a width and a side
// w should be any number, minus the units
// s should be lowercase R or L
.fixedCol(@w, @s) {
	&.fixed-@{s} {
		clear: both;

		> .col {
			& when (@s = r) {
				width: 63%;
			}

			&.fw@{w} {
				width: unit(@w + @p, px);

				& when (@s = r) {
					float: right;
					padding-right: 0;
					margin-left: unit(-(@w + @p), px);
				}
				& when (@s = l) {
					float: left;
					padding-right: unit(@p, px);
					padding-left: 0;
					margin-right: unit(-(@w + @p), px);
				}
				+ .col {
					& when (@s = r) {
						padding-right: unit(@w + @p, px);
					}
					& when (@s = l) {
						width: 100%;
						padding-left: unit(@w + @p, px);
					}
				}
			}
		}
	}
}


//----- MESSAGING ---------------------------------------//
// get the array from the messaging stylesheet and loop through it
.msg(@arrayLength, @index: 1) when (@index =< @arrayLength) {
	@arrayVal: extract(@list, @index);

	&.msg-@{arrayVal} {
		background-color: ~"@{msg-@{arrayVal}-bgcolor}";
		border-color: ~"@{msg-@{arrayVal}-bordercolor}";
		
		.icon {
			display: inline-block;
			width: 20px;
			height: 20px;

			background-image: url(~"@{msg-@{arrayVal}-icon}");
			background-repeat: no-repeat;
		}
		> .txt {
			color: ~"@{msg-@{arrayVal}-color}";
		}
	}
	.msg(@arrayLength, (@index + 1));
}


//----- INACTIVE ----------------------------------------//
.inactive() {
	&.inactive:after,
	&.inactive::after {
		color: @transport-inactive !important;
		cursor: default;

		&:hover {
			color: @transport-inactive !important;
			cursor: default;
		}
	}
}


//----- TRANSPORTS --------------------------------------//
.transMix() {
	> .@{val} {
		margin-@{val}: @transport-width-short;
		margin-@{opp}: @transport-width-short;

		border-@{val}-width: 0;
		border-@{opp}-color: @transport-color;
		border-@{opp}-style: solid;
		border-@{opp}-width: @transport-width;
	}
}
.transPos(@n, @i: 1) when (@i =< @n) {
	@val: extract(@transArr, @i);
	@opp: null;
	& when (@val = extract(@transArr, 1)) {
		@opp: bottom;
		.transMix;
	}
	& when (@val = extract(@transArr, 2)) {
		@opp: left;
		.transMix;
	}
	& when (@val = extract(@transArr, 3)) {
		@opp: top;
		.transMix;
	}
	& when (@val = extract(@transArr, 4)) {
		@opp: right;
		.transMix;
	}

	.transPos(@n, (@i + 1));
}


//----- MODAL WIDTHS ------------------------------------//
.modalWidth(@origWidth; @u: px) {
    @halfWidth: ceil(-(@origWidth / 2));
    & when (@u = px) {
	   	width: unit(@origWidth, @u) !important;
		margin-left: unit(@halfWidth, @u);
    }
    & when (@u = pct) {
        @hundredWidth: (@origWidth / 100);
        @halfWidth: -(@hundredWidth / 2);
        & when (@origWidth =< 100) {
            width: percentage(@hundredWidth) !important;
            margin-left: percentage(@halfWidth);
        }
        & when (@origWidth > 100) {
	        @tenWidth: @hundredWidth / 10;
            width: percentage(@hundredWidth) !important;
            margin-left: percentage(@halfWidth);
        }
    }
}


//----- ROTATE ------------------------------------------//
.rotate(@deg: 0) {
	-webkit-transform: rotate(~'@{deg}deg');
	   -moz-transform: rotate(~'@{deg}deg');
	     -o-transform: rotate(~'@{deg}deg');
	        transform: rotate(~'@{deg}deg');
}


//----- SKINNING ----------------------------------------//
.skinning(@arrLen, @i: 1) when (@i =< @arrLen) {
	
	@varVal: extract(@varArr, @i);
	@classVal: extract(@classArr, @i);

	// background skinning
	.bg-@{classVal} { background-color: @varVal !important; }
	// font color skinning
	.color-@{classVal} { color: @varVal !important; }
	// border-color skinning
	.border-@{classVal} { border-color: @varVal !important; }

	.skinning(@arrLen, @i + 1);
}


//----- SLIDE PANEL -------------------------------------//
.transition(@kind; @speed) {
	-webkit-transition: @kind @speed;
	   -moz-transition: @kind @speed;
	     -o-transition: @kind @speed;
	        transition: @kind @speed;
}


//----- ERROR -------------------------------------------//
.error() {
	.error& {
		border-color: red;
		box-shadow: red 0 0 9px -2px inset;
		&::-webkit-input-placeholder {
			color: red;
		}
		&::-moz-placeholder {
			color: red;
		}
		&:-moz-placeholder {
			color: red;
		}
		&:-ms-input-placeholder {
			color: red;
		}
	}
}