// =============================================================================
// Mixins
// =============================================================================

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

// Widget title bar
// -------------------------
.widget-title-bar(@radius: 50px 30px) {
	#gradient > .vertical(#f9f9f9, #ececec);
	border: 1px solid #e9e9e9;
	border-bottom-color: #dfdfdf;
	border-radius: @radius;
	color: @grayDark;
	.font-size(18);
	padding: 8px 20px;
	margin: 0 0 @smallGutterWidth;
	text-shadow: 0 1px 0 @white;

}

// Section title bar
// -------------------------
.section-title-bar(@radius: 30px, @space: 60px) {
	#gradient > .vertical(#d54e21, #c8471b);
	border-radius: @radius;
	color: @white;
	.font-size(24);
	padding: 10px @space;
	margin: 0 0 @gutterWidth -(@space);
	text-shadow: 1px 1px 0 #9c3412;
}

// Quote box
// -------------------------
.quote-box(@padding: @gutterWidth) {
	background: #f5f8f9 ~"url(images/quote.png)"; // Escaped because of bug in SimpLESS: https://github.com/Paratron/SimpLESS/issues/74
	box-shadow: inset 0 0 20px #e8f0f4, 0 1px 1px #dde5e8, 0 0 3px fade(@black, 5%);
	border: 1px solid #dde5e8;
	border-top: none;
	border-radius: 5px;
	color: darken(#56717d, 5%);
	text-shadow: 0 1px 0 @white;
	#font > .alternative(16, normal, 32px);
	margin: @smallGutterWidth auto;
	padding: @padding;
	position: relative;
}

// Blue box
// -------------------------
.blue-box(@padding: 10px @smallGutterWidth, @margin: 0 0 @gutterWidth, @borderWidth: 4px 0) {
	background-color: #f2f7fc;
	border: double darken(#dde5e8, 8%);
	border-width: @borderWidth;
	margin: @margin;
	padding: @padding;
}

// Highlight box
// -------------------------
.highlight-box(@padding: 10px @smallGutterWidth, @margin: 0 0 @gutterWidth, @borderWidth: 4px 0) {
	background-color: @highlightBackground;
	border: double #eedbbb;
	border-width: @borderWidth;
	margin: @margin;
	padding: @padding;
}

// Sizing shortcuts
// -------------------------
.size(@width, @height) {
	width: @width;
	height: @height;
}

.square(@size) {
	.size(@size, @size);
}

// Webkit-style focus
// ------------------
.tab-focus() {
	// Default
	outline: thin dotted #333;
	// Webkit
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

// Remove margin, padding and list styles
// ------------------
.no-list-style() {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText, @textShadow: none) {
	&:-moz-placeholder {
		color: @color;
		text-shadow: @textShadow;
	}
	&::-webkit-input-placeholder {
		color: @color;
		text-shadow: @textShadow;
	}
}

// Buttons
// -------------------------
.button(@startColor, @endColor, @textColor: @grayDark, @shadowColor: fade(@white, 75%) ) {
	.buttonBackground(@startColor, @endColor, @textColor, @shadowColor);
	box-shadow: inset 0 1px 0 fade(@white, 22%), 0 1px 2px fade(@black, 5%);
	border-radius: 3px;
	#font > .alternative(16, bold);
	padding: 4px 14px;

	&:focus {
		.tab-focus;
	}
}

.buttonBackground(@startColor, @endColor, @textColor: @grayDark, @shadowColor: fade(@white, 75%)) {
	#gradient > .vertical(@startColor, @endColor);
	background-repeat: repeat-x;
	border: 1px solid;
	border-color: darken(@endColor, 8%) darken(@endColor, 8%) darken(@endColor, 20%);
	color: @textColor;
	text-shadow: 0 1px 0 @shadowColor;

	&:hover {
		#gradient > .vertical(darken(@startColor, 3%), darken(@endColor, 5%));
		border-color: darken(@endColor, 20%) darken(@endColor, 20%) darken(@endColor, 30%);
		color: @textColor;
		.transition(background-position 100ms linear);
	}

	&:active {
		box-shadow: inset 0 2px 4px fade(@black, 15%), 0 1px 2px fade(@black, 5%);
	}
}

// Fonts
// --------------------------------------------------

#font {
	#family {
		.serif() {
			font-family: @serifFontFamily;
		}

		.sans-serif() {
			font-family: @sansFontFamily;
		}

		.monospace() {
			font-family: @monoFontFamily;
		}

		.alternative() {
			font-family: @altFontFamily;
		}
	}

	.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
		.font-size(@size);
		font-weight: @weight;
		line-height: @lineHeight;
	}

	.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
		#font > #family > .serif;
		#font > .shorthand(@size, @weight, @lineHeight);
	}

	.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
		#font > #family > .sans-serif;
		#font > .shorthand(@size, @weight, @lineHeight);
	}

	.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
		#font > #family > .monospace;
		#font > .shorthand(@size, @weight, @lineHeight);
	}

	.alternative(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
		#font > #family > .alternative;
		#font > .shorthand(@size, @weight, @lineHeight);
	}
}

// CSS3 Properties
// --------------------------------------------------

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
	 -moz-transition: @transition; // Not needed since Firefox 16
	   -o-transition: @transition;
		  transition: @transition;
}

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

// Transformations
.transform(@transform) {
  -webkit-transform: @transform;
	 -moz-transform: @transform;
	  -ms-transform: @transform;
	   -o-transform: @transform;
		  transform: @transform;
}

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
	 -moz-transform: rotate(@degrees);
	  -ms-transform: rotate(@degrees);
	   -o-transform: rotate(@degrees);
		  transform: rotate(@degrees);
}

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

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

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

// transform: skew has been removed from the spec
// https://developer.mozilla.org/en-US/docs/CSS/transform#skew
.skewX(@x) {
  -webkit-transform: skewX(@x);
	 -moz-transform: skewX(@x);
	  -ms-transform: skewX(@x);
	   -o-transform: skewX(@x);
		  transform: skewX(@x);
}

.skewY(@y) {
  -webkit-transform: skewY(@y);
	 -moz-transform: skewY(@y);
	  -ms-transform: skewY(@y);
	   -o-transform: skewY(@y);
		  transform: skewY(@y);
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
.backface-visibility(@visibility){
	-webkit-backface-visibility: @visibility;
	   -moz-backface-visibility: @visibility;
			backface-visibility: @visibility;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
	 -moz-box-sizing: @boxmodel;
		  box-sizing: @boxmodel;
}

// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gutterWidth) {
  -webkit-column-count: @columnCount;
	 -moz-column-count: @columnCount;
		  column-count: @columnCount;
  -webkit-column-gap: @columnGap;
	 -moz-column-gap: @columnGap;
		  column-gap: @columnGap;
}

// Column breaks
// auto | always | avoid | left | right | page | column | avoid-page | avoid-column
.content-columns-break-inside(@break: auto) {
	-webkit-column-break-inside: @break;
	-moz-column-break-inside: @break;
	-o-column-break-inside: @break;
	column-break-inside: @break;
}

.content-columns-break-before(@break: auto) {
	-webkit-column-break-before: @break;
	-moz-column-break-before: @break;
	-o-column-break-before: @break;
	column-break-before: @break;
}

.content-columns-break-after(@break: auto) {
	-webkit-column-break-after: @break;
	-moz-column-break-after: @break;
	-o-column-break-after: @break;
	column-break-after: @break;
}

// Hyphenation
.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
	 -moz-hyphens: @mode;
	  -ms-hyphens: @mode;
	   -o-hyphens: @mode;
		  hyphens: @mode;
}

// CSS3 flexbox
// http://css-tricks.com/old-flexbox-and-new-flexbox/
// http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-moz-@{display}";
	display: ~"-ms-@{display}";
	display: ~"-o-@{display}";
	display: @display;
}

// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
       -o-flex: @columns;
          flex: @columns;
}

// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
     -moz-flex-direction: @direction;
      -ms-flex-direction: @direction;
       -o-flex-direction: @direction;
          flex-direction: @direction;
}

// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
       -o-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
       -o-flex-flow: @flow;
          flex-flow: @flow;
}

// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
       -o-order: @order;
          order: @order;
}

// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
       -o-flex-grow: @grow;
          flex-grow: @grow;
}

// <number>
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
       -o-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
       -o-flex-basis: @width;
          flex-basis: @width;
}

// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: @justify;
       -o-justify-content: @justify;
          justify-content: @justify;
}

// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -ms-align-content: @align;
       -o-align-content: @align;
          align-content: @align;
}

// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
       -o-align-items: @align;
          align-items: @align;
}

// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
       -o-align-self: @align;
          align-self: @align;
}

// Gradients
// --------------------------------------------------
#gradient {
	.horizontal(@startColor: #555, @endColor: #333, @colorStop: 0%) {
		background-color: @endColor;
		background-image: -webkit-linear-gradient(left, @startColor @colorStop, @endColor); // Safari 5.1+, Chrome 10+
		background-image:    -moz-linear-gradient(left, @startColor @colorStop, @endColor); // Not needed since Firefox 16
		background-image:      -o-linear-gradient(left, @startColor @colorStop, @endColor); // Opera 11.10
		background-image:         linear-gradient(left, @startColor @colorStop, @endColor); // The standard
		background-repeat: repeat-x;
	}

	.vertical(@startColor: #555, @endColor: #333, @colorStop: 100%) {
		background-color: mix(@startColor, @endColor, 60%);
		background-image: -webkit-linear-gradient(top, @startColor, @endColor @colorStop); // Safari 5.1+, Chrome 10+
		background-image:    -moz-linear-gradient(top, @startColor, @endColor @colorStop); // Not needed since Firefox 16
		background-image:      -o-linear-gradient(top, @startColor, @endColor @colorStop); // Opera 11.10
		background-image:         linear-gradient(top, @startColor, @endColor @colorStop); // The standard
	}

	.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
		background-color: @endColor;
		background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
		background-image:    -moz-linear-gradient(@deg, @startColor, @endColor); // Not needed since Firefox 16
		background-image:      -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
		background-image:         linear-gradient(@deg, @startColor, @endColor); // The standard
		background-repeat: repeat-x;
	}

	.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
		background-color: mix(@midColor, @endColor, 80%);
		background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background-image:    -moz-linear-gradient(top, @startColor, @midColor @colorStop * 100%, @endColor); // Not needed since Firefox 16
		background-image:      -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background-image:         linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background-repeat: no-repeat;
	}

	.radial(@innerColor: #555, @outerColor: #333, @shape: circle)  {
		background-color: @outerColor;
		background-image: -webkit-radial-gradient(@shape, @innerColor, @outerColor);
		background-image:    -moz-radial-gradient(@shape, @innerColor, @outerColor);
		background-image:      -o-radial-gradient(@shape, @innerColor, @outerColor);
		background-image:         radial-gradient(@shape, @innerColor, @outerColor);
		background-repeat: no-repeat;
	}

	.striped(@color, @angle: -45deg) {
		@fade: fade(@white, 20%);
		background-color: @color;
		background-image: -webkit-linear-gradient(@angle, @fade 25%, transparent 25%, transparent 50%, @fade 50%, @fade 75%, transparent 75%, transparent);
		background-image: 	 -moz-linear-gradient(@angle, @fade 25%, transparent 25%, transparent 50%, @fade 50%, @fade 75%, transparent 75%, transparent);
		background-image: 	   -o-linear-gradient(@angle, @fade 25%, transparent 25%, transparent 50%, @fade 50%, @fade 75%, transparent 75%, transparent);
		background-image:         linear-gradient(@angle, @fade 25%, transparent 25%, transparent 50%, @fade 50%, @fade 75%, transparent 75%, transparent);
	}
}