/*

[Table of Contents]

1. FONTS
	1.1 Font Size [.font-size]
	1.2 Text Overflow [.text-overflow]
	1.3 Text Undeline Ink [.text-decoration-ink]
	1.4 Text Strike Behind [..text-strikebehind]
	1.5 Hide Text [.hide-text]
	1.6 Show Text [.show-text]
	1.7 Break Long Words [.break-long-words]
	1.8 Font Icon [.font-icon]
	1.9 Clamp Lines [.clamp-lines]
2. FORMS
	2.1 Placeholder Text [.placeholder-text]
3. EFFECTS
	3.1 Rounded Corners
		3.1.1 Rounded Corners All [.rounded-corners]
		3.1.2 Rounded Corners Top [.rounded-corners-top]
		3.1.3 Rounded Corners Bottom [.rounded-corners-bottom]
		3.1.4 Rounded Corners Left [.rounded-corners-left]
		3.1.5 Rounded Corners Right [.rounded-corners-left]
	3.2 Flexbox Display [.flex-display]
	3.3 Flexbox Display Order [.flex-order]
	3.4 Gradients
		3.4.1 Horizontal Gradient [.horizontal]
		3.4.2 Vertical Gradient [.vertical]
		3.4.2 Vertical Gradient [.vertical]
		3.4.3 Vertical Half-Half Gradient [.vertical_50]
		3.4.4 Directional Gradient [.directional]
		3.4.5 Radial Gradient [.radial]
	3.5 Shadows
		3.5.1 Box Shadow [.box-shadow]
		3.5.2 Text Shadow [.text-shadow]
		3.5.3 Drop Shadow [.drop-shadow]
	3.6 Blur [.blur]
	3.7 Opacity [.opacity]
	3.8 Vertical Align Middle [.vertical-align]
	3.9 Horizontal Align Center [.horizontal-align]
	3.10 Background Alpha [.background-alpha]
	3.11 Background Size [.background-size]
	3.12 Background Clip [.background-clip]
	3.13 Transforms
		3.13.1 Rotate [.rotate]
		3.13.2 Scale [.scale]
		3.13.3 Scale Spec [.scale-spec]
		3.13.4 Skew [.skew]
		3.13.5 Transition [.transition]
		3.13.6 Transform Origin [.transform-origin]
		3.13.7 Translate [.translate]
		3.13.8 Translate 3D [.translate3d]
		3.13.9 Keyframes [.keyframes]
		3.13.10 Animation [.animation]
		3.13.11 Animation Delay [.animation-delay]
		3.13.12 Animation Play State [.animation-play-state]
		3.13.13 Animation Duration [.animation-duration]
4. OTHER
	4.1 Make Circle [.make-circle]
	4.2 Box Sizing [.box-sizing]
	4.3 Chrome Frame [.chrome-frame]
	4.4 Contain Floats [.clearfix]
	4.5 Clear [.clear]
	4.6 Image Replacement [.ir]
	4.7 Hidden [.hidden]
	4.8 Invisible [.invisible]
	4.9 Resize [.resize]
	4.10 User Select [.user-select]
	4.11 Scrollbar [.scrollbar]
	4.12 Generate Random Number [.make-random]
	4.13 Prevent Click [.prevent-click]

*/


/*************** 1. FONTS ***************/

/*****---------- 1.1 Font Size [.font-size] ----------*****/

.font-size(@font-size: 16){
	@rem: (@font-size / 10);
	font-size: @font-size * 1px;
	font-size: ~"@{rem}rem";
}

/*****---------- 1.2 Text Overflow [.text-overflow] ----------*****/

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

/*****---------- 1.3 Text Undeline Ink [.text-decoration-ink] ----------*****/

.text-decoration-ink {
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

/*****---------- 1.4 Text Strike Behind [..text-strikebehind] ----------*****/

.text-strikebehind(@width: 1px, @color: #ddd) {
	position: relative;
	width: 100%;
	overflow: hidden;

	&:before,
	&:after {
		.box-sizing();
		background-color: @color;
		content: "";
		display: inline-block;
		height: @width;
		position: relative;
		vertical-align: middle;
		width: 50%;
	}

	&:after {
		margin-right: -50%;
		left: .5em;
	}

	&:before {
		right: .5em;
		margin-left: -50%;
	}
}

/*****---------- 1.5 Hide Text [.hide-text] ----------*****/

.hide-text() {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*****---------- 1.6 Show Text [.show-text] ----------*****/

.show-text() {
  text-indent: 0;
  white-space: normal;
  overflow: auto;
}

/*****---------- 1.7 Break Long Words [.break-long-words] ----------*****/

.break-long-words {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*****---------- 1.8 Font Icon [.font-icon] ----------*****/

.font-icon {
	font-family: @icon-font;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	text-rendering: auto;
	vertical-align: middle;
}

/*****---------- 1.9 Clamp Lines [.clamp-lines] ----------*****/

.clamp-lines(@num-of-lines) {
	word-break: normal;
	& when (@num-of-lines = 1) {
		word-break: break-all;
	}
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: @num-of-lines;
	-webkit-box-orient: vertical;
}


/*************** 2. FORMS ***************/


/*****---------- 2.1 Placeholder Text [.placeholder-text] ----------*****/

.placeholder-text(@placeholder-color, @font-style, @font-weight: 400) {

	::-webkit-input-placeholder {
		color: @placeholder-color;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	:-moz-placeholder {
		color: @placeholder-color;
		opacity: 1;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	::-moz-placeholder {
		color: @placeholder-color;
		opacity: 1;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	:-ms-input-placeholder {
		color: @placeholder-color;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	::-ms-input-placeholder {
		color: @placeholder-color;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	::placeholder {
		color: @placeholder-color;
		font-style: @font-style;
		font-weight: @font-weight;
	}

	input:focus::-webkit-input-placeholder {
		opacity: 0.2
	}

	input:focus::-moz-placeholder {
		opacity: 0.2
	}

	input:focus:-ms-input-placeholder {
		opacity: 0.2
	}

	input:focus:-moz-placeholder {
		opacity: 0.2
	}
}



/*************** 3. EFFECTS ***************/

/*****---------- 3.1 Rounded Corners ----------*****/

/**------------- 3.1.1 Rounded Corners All [.rounded-corners] -------------**/

.rounded-corners (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}

/**------------- 3.1.2 Rounded Corners Top [.rounded-corners-top] -------------**/

.rounded-corners-top (@radius: 5px) {
	-webkit-border-top-left-radius: @radius;
	-webkit-border-top-right-radius: @radius;
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}

/**------------- 3.1.3 Rounded Corners Bottom [.rounded-corners-bottom] -------------**/

.rounded-corners-bottom (@radius: 5px) {
	-webkit-border-bottom-right-radius: @radius;
	-webkit-border-bottom-left-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	-moz-border-radius-bottomleft: @radius;
	border-bottom-right-radius: @radius;
	border-bottom-left-radius: @radius;
}

/**------------- 3.1.4 Rounded Corners Left [.rounded-corners-left] -------------**/

.rounded-corners-left (@radius: 5px) {
	-webkit-border-bottom-left-radius: @radius;
	-webkit-border-top-left-radius: @radius;
	-moz-border-radius-bottomleft: @radius;
	-moz-border-radius-topleft: @radius;
	border-bottom-left-radius: @radius;
	border-top-left-radius: @radius;
}

/**------------- 3.1.5 Rounded Corners Right [.rounded-corners-left] -------------**/

.rounded-corners-right (@radius: 5px) {
	-webkit-border-bottom-right-radius: @radius;
	-webkit-border-top-right-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	-moz-border-radius-topright: @radius;
	border-bottom-right-radius: @radius;
	border-top-right-radius: @radius;
}

/*****---------- 3.2 Flexbox Display [.flex-display] ----------*****/

.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

/*****---------- 3.3 Flexbox Display Order [.flex-order] ----------*****/

.flex-order(@order: 0) {
	-webkit-order: @order;
    	-ms-order: @order;
        	order: @order;
}

/*****---------- 3.4 Gradients ----------*****/

/**------------- 3.4.1 Horizontal Gradient [.horizontal] -------------**/

.horizontal(@startColor: @white, @endColor: @lightergrey) {
	background-color: @endColor;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
	background-image: linear-gradient(to left, @startColor, @endColor);
	background-repeat: repeat-x;
}

.horizontal-flip(@startColor: @white, @endColor: @lightergrey) {
	background-color: @endColor;
	background-image: -webkit-gradient(linear, 0 0,0 100%, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(right, @startColor, @endColor);
	background-image: -moz-linear-gradient(right, @startColor, @endColor);
	background-image: -ms-linear-gradient(right, @startColor, @endColor);
	background-image: -o-linear-gradient(right, @startColor, @endColor);
	background-image: linear-gradient(to right, @startColor, @endColor);
	background-repeat: repeat-x;
}

/**------------- 3.4.2 Vertical Gradient [.vertical] -------------**/

.vertical(@startColor: @white, @endColor: @lightergrey) {
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(top, @startColor, @endColor);
	background-color: @endColor;
	background-image: -moz-linear-gradient(top, @startColor, @endColor);
	background-image: -ms-linear-gradient(top, @startColor, @endColor);
	background-image: -o-linear-gradient(top, @startColor, @endColor);
	background-image: linear-gradient(to bottom, @startColor, @endColor);
	background-repeat: repeat-x; 
}

/**------------- 3.4.2 Vertical Gradient [.vertical] -------------**/

.vertical-flip(@startColor: @white, @endColor: @lightergrey) {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(bottom, @startColor, @endColor);
	background-color: @endColor;
	background-image: -moz-linear-gradient(bottom, @startColor, @endColor);
	background-image: -ms-linear-gradient(bottom, @startColor, @endColor);
	background-image: -o-linear-gradient(bottom, @startColor, @endColor);
	background-image: linear-gradient(to top, @startColor, @endColor);
	background-repeat: repeat-x; 
}

/**------------- 3.4.3 Vertical Half-Half Gradient [.vertical_50] -------------**/

.vertical_50(@startColor: @white, @endColor:  @lightergrey) {
	background: @startColor;
	background: -moz-linear-gradient(top, @startColor 0%, @startColor 50%, @endColor 51%, @endColor 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(50%,@startColor), color-stop(51%,@endColor), color-stop(100%,@endColor));
	background: -webkit-linear-gradient(top, @startColor 0%,@startColor 50%,@endColor 51%,@endColor 100%);
	background: -o-linear-gradient(top, @startColor 0%,@startColor 50%,@endColor 51%,@endColor 100%);
	background: -ms-linear-gradient(top, @startColor 0%,@startColor 50%,@endColor 51%,@endColor 100%);
	background: linear-gradient(to bottom, @startColor 0%,@startColor 50%,@endColor 51%,@endColor 100%);
}

/**------------- 3.4.4 Directional Gradient [.directional] -------------**/

.directional(@startColor: @white, @endColor: @lightergrey, @deg: 45deg) {
	background-color: @endColor;
	background-image: -moz-linear-gradient(@deg, @startColor, @endColor);
	background-image: -ms-linear-gradient(@deg, @startColor, @endColor);
	background-image: -webkit-linear-gradient(@deg, @startColor, @endColor);
	background-image: -o-linear-gradient(@deg, @startColor, @endColor);
	background-image: linear-gradient(@deg, @startColor, @endColor);
	background-repeat: repeat-x;
}

/**------------- 3.4.5 Radial Gradient [.radial] -------------**/

.radial(@posX:center, @posY:center, @shape:circle, @size:closest-side, @from:white, @to:black){
    background-image: -webkit-radial-gradient(@posX @posY, @shape @size, @from, @to);
}

/*****---------- 3.5 Shadows ----------*****/

/**------------- 3.5.1 Box Shadow [.box-shadow] -------------**/
// Values: HORIZONTAL VERTICAL BLUR COLOR

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
	-webkit-box-shadow: @shadow;
	-moz-box-shadow: @shadow;
	box-shadow: @shadow;
}

/**------------- 3.5.2 Text Shadow [.text-shadow] -------------**/
// Values: X, Y, BLUR, COLOR

.text-shadow(@X: 1px, @Y: 1px, @blur: 3px, @color: #888) {
	text-shadow: @X @Y @blur @color;
}

/**------------- 3.5.3 Drop Shadow [.drop-shadow] -------------**/
// Values: HORIZONTAL, VERTICAL, BLUR, ALPHA

.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);
}

/*****---------- 3.6 Blur [.blur] ----------*****/

.blur(@blur) {
	-webkit-filter: blur(@blur); 
	-moz-filter: blur(@blur); 
	-ms-filter: blur(@blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='@blur');
}

/*****---------- 3.7 Opacity [.opacity] ----------*****/

.opacity(@opacity:1) {
	@freaking-ie: @opacity * 100;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{freaking-ie})";
	filter: alpha(opacity=@freaking-ie);
	-webkit-opacity: @opacity;
	-moz-opacity: @opacity;
	opacity: @opacity;
}

/*****---------- 3.8 Vertical Align Middle [.vertical-align] ----------*****/

.vertical-align(@position: relative) {
	position: @position;
	top: 50%;
	-webkit-transform: perspective(1px) translateY(-50%);
	-ms-transform: perspective(1px) translateY(-50%);
	-o-transform: perspective(1px) translateY(-50%);
	transform: perspective(1px) translateY(-50%);
}

/*****---------- 3.9 Horizontal Align Center [.horizontal-align] ----------*****/

.horizontal-align(@position: relative) {
	position: @position;
	left: 50%;
	-webkit-transform: perspective(1px) translateX(-50% - .3px);
	-ms-transform: perspective(1px) translateX(-50% - .3px);
	-o-transform: perspective(1px) translateX(-50% - .3px);
	transform: perspective(1px) translateX(-50% - .3px);
}

/*****---------- 3.10 Background Alpha [.background-alpha] ----------*****/

.background-alpha(@color: @white, @alpha: 1) {
	background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

/*****---------- 3.11 Background Size [.background-size] ----------*****/

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

/*****---------- 3.12 Background Clip [.background-clip] ----------*****/

.background-clip(@clip) {
	-webkit-background-clip: @clip;
	-moz-background-clip: @clip;
	background-clip: @clip;
}

/*****---------- 3.13 Transforms ----------*****/

/**------------- 3.13.1 Rotate [.rotate] -------------**/

.rotate(@deg: 90) {
	-webkit-transform: rotate(@deg * 1deg);
	-moz-transform: rotate(@deg * 1deg);
	transform: rotate(@deg * 1deg);
	-o-transform: rotate(@deg * 1deg);
	@IEdeg: round(@deg / 90, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@IEdeg);
}

.rotateY(@deg: 90) {
	-webkit-transform: rotateY(@deg * 1deg);
	-moz-transform: rotateY(@deg * 1deg);
	transform: rotateY(@deg * 1deg);
	-o-transform: rotateY(@deg * 1deg);
	@IEdeg: round(@deg / 90, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@IEdeg);
}

/**------------- 3.13.2 Scale [.scale] -------------**/

.scale(@ratio) {
	-webkit-transform: scale(@ratio);
	-moz-transform: scale(@ratio);
	-ms-transform: scale(@ratio);
	-o-transform: scale(@ratio);
	transform: scale(@ratio);
}

/**------------- 3.13.3 Scale Spec [.scale-spec] -------------**/

.scale-spec(@width:1, @height:1) {
	-webkit-transform: scale(@width, @height);
	-moz-transform: scale(@width, @height);
	-ms-transform: scale(@width, @height);
	-o-transform: scale(@width, @height);
	transform: scale(@width, @height);
}

/**------------- 3.13.4 Skew [.skew] -------------**/

.skew(@x: 0, @y: 0) {
	-webkit-transform: skew(@x, @y);
	-moz-transform: skew(@x, @y);
	-ms-transform: skew(@x, @y);
	-o-transform: skew(@x, @y);
	transform: skew(@x, @y);
}

/**------------- 3.13.5 Transition [.transition] -------------**/

.transition(@property:all, @duration:0.2s, @ease:ease-in-out) {
	-webkit-transition: @property @duration @ease;
	-moz-transition: @property @duration @ease;
	-o-transition: @property @duration @ease;
	-ms-transition: @property @duration @ease;
	transition: @property @duration @ease;
}

.transition-duration(@duration: 200ms) {
	-webkit-transition-duration: @duration;
	-moz-transition-duration: @duration;
	-o-transition-duration: @duration;
	transition-duration: @duration;
}

/**------------- 3.13.6 Transform Origin [.transform-origin] -------------**/

.transform-origin(@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

/**------------- 3.13.7 Translate [.translate] -------------**/

.translate(@x: 0, @y: 0) {
	-webkit-transform: translate(@x, @y);
	-moz-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y);
	-o-transform: translate(@x, @y);
	transform: translate(@x, @y);
}

/**------------- 3.13.8 Translate 3D [.translate3d] -------------**/

.translate3d(@x: 0, @y: 0, @z: 0) {
	-webkit-transform: translate3d(@x, @y, @z);
	-moz-transform: translate3d(@x, @y, @z);
	-ms-transform: translate3d(@x, @y, @z);
	-o-transform: translate3d(@x, @y, @z);
	transform: translate3d(@x, @y, @z);
}

/**------------- 3.13.9 Keyframes [.keyframes] -------------**/

.keyframes(@name, @frames) {
	@-webkit-keyframes @name { @frames(); }
	@-moz-keyframes @name { @frames(); }
	@-ms-keyframes @name { @frames(); }
	@-o-keyframes @name { @frames(); }
	@keyframes @name { @frames(); }
}

/**------------- 3.13.10 Animation [.animation] -------------**/

.animation(@arguments) {
	-webkit-animation:	@arguments;
	-moz-animation: 	@arguments;
	-ms-animation:		@arguments;
	animation:			@arguments;
}

/**------------- 3.13.11 Animation Delay [.animation-delay] -------------**/

.animation-delay(@delay) {
	-webkit-animation-delay: @delay;
	-moz-animation-delay: @delay;
	-o-animation-delay: @delay;
	-ms-animation-delay: @delay;
	animation-delay: @delay;
}

/**------------- 3.13.12 Animation Play State [.animation-play-state] -------------**/

.animation-play-state(@state) {
	-webkit-animation-play-state: @state;
	-moz-animation-play-state: @state;
	-o-animation-play-state: @state;
	-ms-animation-play-state: @state;
	animation-play-state: @state;
}

/**------------- 3.13.13 Animation Duration [.animation-duration] -------------**/

.animation-duration(@duration) {
	-webkit-animation-duration: @duration;
	-moz-animation-duration: @duration;
	-o-animation-duration: @duration;
	-ms-animation-duration: @duration;
	animation-duration: @duration;
}



/*************** 4. OTHER ***************/

/*****---------- 4.1 Make Circle [.make-circle] ----------*****/

.make-circle(@width) {
	width: @width;
	height: @width;
	.rounded-corners(50%);
	overflow: hidden;
}

/*****---------- 4.2 Box Sizing [.box-sizing] ----------*****/

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

/*****---------- 4.3 Chrome Frame [.chrome-frame] ----------*****/

.chromeframe() { 
	margin: .2em 0;
	background: @lightgrey;
	color: @black;
	padding: .2em 0;
}

/*****---------- 4.4 Contain Floats [.clearfix] ----------*****/

.clearfix {
	*zoom: 1;

	&:before {
		content: " ";
		display: table;
	}

	&:after {
		content: " ";
		display: table;
		clear: both;
	}
}

/*.clearfix {

	&:after {
		display: block;
		content: "";
		clear: both;
	}
}*/


/*****---------- 4.5 Clear [.clear] ----------*****/

.clear(@hard:false) when (@hard = old) {
	&:before,
	&:after {
		display: table;
		content: '';
	}
	&:after {
		clear: both;
	}
	.lt-ie8 & {
		zoom: 1;
	}
}


/*****---------- 4.6 Image Replacement [.ir] ----------*****/

.ir() {
	overflow: hidden;
	text-indent: -999em;
}

/*****---------- 4.7 Hidden [.hidden] ----------*****/

.hidden() {
	display: none !important;
	visibility: hidden;
}

/*****---------- 4.8 Invisible [.invisible] ----------*****/

.invisible() { 
	visibility: hidden;
}

/*****---------- 4.9 Resize [.resize] ----------*****/

.resize(@direction: both) {
	resize: @direction;
	overflow: auto;
}

/*****---------- 4.10 User Select [.user-select] ----------*****/

.user-select(@select) {
	-webkit-touch-callout: @select;
	-webkit-user-select: @select;
	-khtml-user-select: @select;
	-moz-user-select: @select;
	-ms-user-select: @select;
	user-select: @select;
	-o-user-select: @select;
}

/*****---------- 4.11 Scrollbar [.scrollbar] ----------*****/

.scrollbar (@size, @foreground-color, @background-color) {
	// For Google Chrome
	::-webkit-scrollbar {
		width:  @size;
		height: @size;
	}

	::-webkit-scrollbar-thumb {
		background: @foreground-color;
	}

	::-webkit-scrollbar-track {
		background: @background-color;
	}

	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}

	// For Internet Explorer
	body {
		scrollbar-face-color: @foreground-color;
		scrollbar-track-color: @background-color;
	}
}

/*****---------- 4.12 Generate Random Number [.make-random] ----------*****/

//Mixin to generate random number;
// int should be 0 or 1, 1 being to make it an integer 

.make-random(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }
  .checkInt();
  @randNum: @base + @min;
}

//.rand1 {
//  .makeRandom(); /* straight random decimal between 0 - 1 */
//  random-number: @randNum;
//}
//
//.rand2 {
//  .makeRandom(@max: 2); /* random decimal 0 - 2 */
//  random-number: @randNum;
//}
//
//.rand3 {
//  .makeRandom(10, 20, 1); /* random integer  10 - 20 */
//  random-number: @randNum;  
//}

/*****---------- 4.13 Prevent/Enable Click [.prevent-click, .enable-click] ----------*****/

.prevent-click(@cursor: default) {
	pointer-events: none;
	cursor: @cursor;
}

.enable-click(@cursor: pointer) {
	pointer-events: all;
	cursor: @cursor;
}


.grayscale {
	//-webkit-filter: grayscale(100%) contrast(1.2) brightness(70%) saturate(50%);
	//filter: grayscale(100%) contrast(1.2) brightness(70%) saturate(50%);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);

	&.blue {
		-webkit-filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
		filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
	}
	
	&.grey {
		-webkit-filter: grayscale(100%) brightness(110%) contrast(0.9);
		filter: grayscale(100%) brightness(110%) contrast(0.9);
	}

	&.black {
		-webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
		filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
	}
}

.transparentBackgroundColorMixin(@alpha,@color) {
	background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}