// Mixins
// Snippets of reusable CSS to develop faster and keep code readable

// Clearfix for clearing floats like a boss h5bp.com/q -> No presentational code needed :)
.clearfixHack() {
    zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        zoom: 1;
    }
    &:after {
        clear: both;
    }
}

// Fonts
#font {
    .sansSerif(@weight: normal, @size: @baseFontSize, @color: @baseFontColor, @lineHeight: @baseLineHeight) {
       font-family: Arial, sans-serif;
       font-size: @size;
       font-weight: @weight;
       line-height: @lineHeight;
    }
    .code(@weight: normal, @size: @baseFontSize, @color: @baseFontColor, @lineHeight: @baseLineHeight) {
        font-family: Monaco, Andale Mono, Courier New, monospace;
        font-size: @size;
        font-weight: @weight;
        line-height: @lineHeight;
    }
    .helveticaBold () {
        font-family: "Helvetica", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-weight: bold;
    }
}
// For sass convertion
.font-sansSerif(@weight: normal, @size: @baseFontSize, @color: @baseFontColor, @lineHeight: @baseLineHeight) {
   font-family: Arial, sans-serif;
   font-size: @size;
   font-weight: @weight;
   line-height: @lineHeight;
}
.font-code(@weight: normal, @size: @baseFontSize, @color: @baseFontColor, @lineHeight: @baseLineHeight) {
    font-family: Monaco, Andale Mono, Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
}
.font-helveticaBold () {
    font-family: "Helvetica", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-weight: bold;
}


// Border Radius
.border-radius (@values) {
	border-radius: @values;
}
.border-radius-topleft (@size) {
    border-top-left-radius: @size;
}
.border-radius-topright (@size) {
    border-top-right-radius: @size;
}
.border-radius-bottomright (@size) {
    border-bottom-right-radius: @size;
}
.border-radius-bottomleft (@size) {
    border-bottom-left-radius: @size;
}
.border-radius-top (@size) {
    .border-radius-topleft (@size);
    .border-radius-topright (@size);
}
.border-radius-right (@size) {
    .border-radius-topright (@size);
    .border-radius-bottomright (@size);
}
.border-radius-right (@rtl, @size) when (@rtl = false) {
    .border-radius-topright (@size);
    .border-radius-bottomright (@size);
}
.border-radius-right (@rtl, @size) when (@rtl = true) {
    .border-radius-topleft (@size);
    .border-radius-bottomleft (@size);
}
.border-radius-bottom (@size) {
    .border-radius-bottomright (@size);
    .border-radius-bottomleft (@size);
}
.border-radius-left (@size) {
    .border-radius-topleft (@size);
    .border-radius-bottomleft (@size);
}
.border-radius-left (@rtl, @size) when (@rtl = false) {
    .border-radius-topleft (@size);
    .border-radius-bottomleft (@size);
}
.border-radius-left (@rtl, @size) when (@rtl = true) {
    .border-radius-topright (@size);
    .border-radius-bottomright (@size);
}

// Disable text selection
.user-select (@value) {
    -webkit-user-select: @value;
    -khtml-user-select: @value;
    -moz-user-select: @value;
    -o-user-select: @value;
    user-select: @value;
}

// Transitions
.transition (@transition) {
    -webkit-transition: @transition;
    transition: @transition;
}

// @deprecated
.box-shadow (@values: 0 0 2px @gray) {
    box-shadow: @values;
}

// @deprecated
.opacity(@opacity: 100) {
    opacity: @opacity / 100;
}

// @deprecated
.ie7-inline-block() {
  display: inline-block;
}


// Gradient Bar Colors for buttons and allerts
.gradientBar(@primaryColor, @secondaryColor) {
  #gradient > .vertical(@primaryColor, @secondaryColor);
}

// Gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: linear-gradient(to right, @startColor, @endColor);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: linear-gradient(to bottom, @startColor, @endColor);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: linear-gradient(@deg, @startColor, @endColor);
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  }
}
// For sass convertion
.gradient-horizontal(@startColor: #555, @endColor: #333) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: linear-gradient(to right, @startColor, @endColor);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.gradient-vertical(@startColor: #555, @endColor: #333) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: linear-gradient(to bottom, @startColor, @endColor);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.gradient-directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: linear-gradient(@deg, @startColor, @endColor);
}
.gradient-vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-color: @endColor;
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}

// Background clipping
.background-clip(@clip) {
  background-clip: @clip;
}

// Fix text inherit
.text-inherit() {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

// Hyphenation
.hyphens() {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

// Arrows
.arrow(@position: top, @size : 10px, @color :  black,  @borderWidth: 0, @borderColor : transparent){
  position: relative;

  .border (@position, @color) when (@position = top) { border-bottom-color: @color }
  .border (@position, @color) when (@position = right) { border-left-color: @color }
  .border (@position, @color) when (@position = bottom) { border-top-color: @color }
  .border (@position, @color) when (@position = left) { border-right-color: @color; }

  .position (@position, @size) when (@position = top) { bottom: 100%; margin-left: @size; left: 50%;  }
  .position (@position, @size) when (@position = right) { left: 100%; margin-top: @size; top: 50%; }
  .position (@position, @size) when (@position = bottom) { left: 50%; margin-left: @size; top: 100%; }
  .position (@position, @size) when (@position = left) { margin-top: @size; right: 100%; top: 50%;  }

  &:after, &:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    .border(@position, @color);
    border-width: @size;
    .position(@position, @size * -1);
  }

  &:before {
    @outerSize: round(@borderWidth * 1.41421356);
    .border(@position, @borderColor);
    border-width: @size + @outerSize;
    .position(@position, (-1 * (@size + @outerSize)));
  }
}

.inner-arrow(@position: top, @size: 10px, @color:  black,  @borderWidth: 0, @borderColor: transparent) {
  position: relative;

  .border (@position, @color) when (@position = top) { border-top-color: @color }
  .border (@position, @color) when (@position = right) { border-right-color: @color }
  .border (@position, @color) when (@position = bottom) { border-bottom-color: @color }
  .border (@position, @color) when (@position = left) { border-left-color: @color }

  .position (@position, @size) when (@position = top) { top: 0; margin-left: @size; left: 50%; }
  .position (@position, @size) when (@position = right) { right: 0; margin-top: @size; top: 50%; }
  .position (@position, @size) when (@position = bottom) { left: 50%; margin-left: @size; bottom: 0; }
  .position (@position, @size) when (@position = left) { left: 0; margin-top: @size; top: 50%; }

  &:after, &:before {
    border: solid transparent;
    content: '';
    height: 0;
    margin: (@borderWidth * -1);
    pointer-events: none;
    position: absolute;
    width: 0;
  }

  &:after {
    .border(@position, @color);
    border-width: @size;
    .position(@position, (@size * -1));
  }

  &:before {
    @outerSize: round(@borderWidth * 1.41421356);
    .border(@position, @borderColor);
    border-width: (@size + @outerSize);
    .position(@position, (-1 * (@size + @outerSize)));
  }
}

// Deprecated !
#arrow {
  .down (@size, @color) {
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     border-width: @size @size 0 @size;
     border-color: @color transparent transparent transparent;
     border-style: solid;
  }
}
// For sass convertion
.arrow-down (@size, @color) {
   display: block;
   width: 0;
   height: 0;
   position: absolute;
   border-width: @size @size 0 @size;
   border-color: @color transparent transparent transparent;
   border-style: solid;
}

// FORMS

// Misc. use by forms
#font {
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}
// For sass convertion
.font-shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
  font-size: @size;
  font-weight: @weight;
  line-height: @lineHeight;
}


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

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

// Placeholder text
.placeholder(@color: @placeholderText) {
  :-moz-placeholder {
    color: @color;
  }
  ::-webkit-input-placeholder {
    color: @color;
  }
}

// Right To Left mixins

.float-left (@rtl) when (@rtl = false) { float: left; }
.float-left (@rtl) when (@rtl = true) { float: right; }

.float-right (@rtl) when (@rtl = false) { float: right; }
.float-right (@rtl) when (@rtl = true) { float: left; }

.margin (@rtl, @top, @right, @bottom, @left) when (@rtl = false) { margin: @top @right @bottom @left; }
.margin (@rtl, @top, @right, @bottom, @left) when (@rtl = true) { margin: @top @left @bottom @right; }

.padding (@rtl, @top, @right, @bottom, @left) when (@rtl = false) { padding: @top @right @bottom @left; }
.padding (@rtl, @top, @right, @bottom, @left) when (@rtl = true) { padding: @top @left @bottom @right; }

.margin-left (@rtl, @value) when (@rtl = false) { margin-left: @value }
.margin-left (@rtl, @value) when (@rtl = true) { margin-right: @value }

.margin-right (@rtl, @value) when (@rtl = false) { margin-right: @value }
.margin-right (@rtl, @value) when (@rtl = true) { margin-left: @value }

.padding-left (@rtl, @value) when (@rtl = false) { padding-left: @value }
.padding-left (@rtl, @value) when (@rtl = true) { padding-right: @value }

.padding-right (@rtl, @value) when (@rtl = false) { padding-right: @value }
.padding-right (@rtl, @value) when (@rtl = true) { padding-left: @value }

.text-align-left (@rtl) when (@rtl = false) { text-align: left; }
.text-align-left (@rtl) when (@rtl = true) { text-align: right; }

.text-align-right (@rtl) when (@rtl = false) { text-align: right; }
.text-align-right (@rtl) when (@rtl = true) { text-align: left; }

.border-left (@rtl, @value) when (@rtl = false) { border-left: @value; }
.border-left (@rtl, @value) when (@rtl = true) { border-right: @value; }

.border-right (@rtl, @value) when (@rtl = false) { border-right: @value; }
.border-right (@rtl, @value) when (@rtl = true) { border-left: @value; }

.border-left-color (@rtl, @value) when (@rtl = false) { border-left-color: @value; }
.border-left-color (@rtl, @value) when (@rtl = true) { border-right-color: @value; }

.border-right-color (@rtl, @value) when (@rtl = false) { border-right-color: @value; }
.border-right-color (@rtl, @value) when (@rtl = true) { border-left-color: @value; }

.left (@rtl, @value) when (@rtl = false) { left: @value; }
.left (@rtl, @value) when (@rtl = true) { right: @value; }

.right (@rtl, @value) when (@rtl = false) { right: @value; }
.right (@rtl, @value) when (@rtl = true) { left: @value; }

.border-top-right-radius (@rtl, @value) when (@rtl = false) { border-top-right-radius: @value; }
.border-top-right-radius (@rtl, @value) when (@rtl = true) { border-top-left-radius: @value; }

.border-top-left-radius (@rtl, @value) when (@rtl = false) { border-top-left-radius: @value; }
.border-top-left-radius (@rtl, @value) when (@rtl = true) { border-top-right-radius: @value; }