// ==============================================
//  Mixins
// ==============================================
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    zoom: 1;
  }
  &:after {
    clear: both;
  }
}
.clearafter() {.clearfix();}
.small() {font-size:0.85em;}

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

// Border Radius (webkit and moz prefixes are no more needed for newest FireFox and Chrome versions)
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.border-top-left-radius(@radius: 5px) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius: 5px) {
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-left-radius(@radius: 5px) {
  -webkit-border-bottom-left-radius: @radius;
     -moz-border-bottom-left-radius: @radius;
          border-bottom-left-radius: @radius;
}
.border-bottom-right-radius(@radius: 5px) {
  -webkit-border-bottom-right-radius: @radius;
     -moz-border-bottom-right-radius: @radius;
          border-bottom-right-radius: @radius;
}
.border-top-radius(@radius: 5px) {
    .border-top-left-radius(@radius);
    .border-top-right-radius(@radius);
}
.border-bottom-radius(@radius: 5px) {
    .border-bottom-left-radius(@radius);
    .border-bottom-right-radius(@radius);
}
.border-left-radius(@radius: 5px) {
    .border-top-left-radius(@radius);
    .border-bottom-left-radius(@radius);
}
.border-right-radius(@radius: 5px) {
    .border-top-right-radius(@radius);
    .border-bottom-right-radius(@radius);
}

// Drop shadows
.box-shadow(@shadow: 0 1px 3px fadeout(@shadowColor,25%)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

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

// Transitions
.transition(@arguments) {
  -webkit-transition: @arguments;
     -moz-transition: @arguments;
      -ms-transition: @arguments;
       -o-transition: @arguments;
          transition: @arguments;
}

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

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

// Opacity
.opacity(@opacity: 100) {
  filter: e(%("alpha(opacity=%d)", @opacity));
  -khtml-opacity: @opacity / 100;
    -moz-opacity: @opacity / 100;
         opacity: @opacity / 100;
}

// ==============================================
//	Backgrounds
// ==============================================
.base64DataUriBackground (@encode, @type: ~"image/svg+xml") {
    @dataUriPrefix: ~"url(data:@{type};base64,";
    @dataUriSuffix: ~")";
    @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;
    background: @b64DataUri;
}
#gradient {
  .vertical (@startColor: #555, @endColor: #333) {
    @svg: ~'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:@{startColor};stop-opacity=1" /><stop offset="100%" style="stop-color:@{endColor};stop-opacity:1" /></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>';
    .base64DataUriBackground(@svg);
    background: -moz-linear-gradient(top, @startColor 0%, @endColor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(100%,@endColor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @startColor 0%,@endColor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @startColor 0%,@endColor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @startColor 0%,@endColor 100%); /* IE10+ */
    background: linear-gradient(to bottom, @startColor 0%,@endColor 100%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=0 )"; /* IE6-8 */
    :root & {filter:none;}
  }
  .horizontal(@startColor: #555, @endColor: #333) {
    @svg: ~'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:@{startColor};stop-opacity=1" /><stop offset="100%" style="stop-color:@{endColor};stop-opacity:1" /></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>';
    .base64DataUriBackground(@svg);
    background: -moz-linear-gradient(left, @startColor 0%, @endColor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(100%,@endColor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, @startColor 0%,@endColor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, @startColor 0%,@endColor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, @startColor 0%,@endColor 100%); /* IE10+ */
    background: linear-gradient(left, @startColor 0%,@endColor 100%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=1 )"; /* IE6-8 */
    :root & {filter:none;}
  }
}
