// mixin.less
// 
// ------------------------------------------------------------------------

// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
.clear() {
 zoom: 1;

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

// Autotrim
.autotrim() {
 white-space: nowrap;
 -webkit-text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 -ms-text-overflow: ellipsis;
 text-overflow: ellipsis;
 overflow: hidden;
}

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

// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Drop shadows
.box-shadow-two(@shadow01, @shadow02) {
  -webkit-box-shadow: @shadow01, @shadow02;
     -moz-box-shadow: @shadow01, @shadow02;
          box-shadow: @shadow01, @shadow02;
}

// Text shadows
.text-shadow(@shadow) {
  -webkit-text-shadow: @shadow;
     -moz-text-shadow: @shadow;
          text-shadow: @shadow;
}

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

.transition-two(@transition01, @transition02) {
  -webkit-transition: @transition01, @transition02;
     -moz-transition: @transition01, @transition02;
      -ms-transition: @transition01, @transition02;
       -o-transition: @transition01, @transition02;
          transition: @transition01, @transition02;
}

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

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


// Gradients
#gradient {
  .horizontal(@startColor: @gray20, @endColor: @gray10) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical(@startColor: @gray20, @endColor: @gray10) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
  .directional(@startColor: @gray20, @endColor: @gray10, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  }
  .vertical-three-colors(@startColor: @gray20, @midColor: @gray10, @colorStop: 50%, @endColor: @gray05) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    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
  }
  .radial(@innerColor: @gray20, @outerColor: @gray10) {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
  }
  .striped(@color, @angle: -45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }
}

// CSS SPRITE
// --------------------------------------------------
.ico-base(@iconSize: 19px) {
 width: @iconSize;
 height: @iconSize;
 display: inline-block;
 vertical-align: middle;
 .hidetext();
}

.sprite-position(@spritePosition-x: left,@spritePosition-y: top) {
 background-position: @spritePosition-x @spritePosition-y;
}

// Triangle
// --------------------------------------------------

.triangle-base(@triangleSize: 7px, @triangleBottom: -7px, @triangleLeft: 36%, @triangleColor: @white) {
 display: block;
 content: "";
 position: absolute;
 bottom: @triangleBottom;
 left: @triangleLeft;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-color: @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize 0;
 z-index: 1; 
}

.triangle-border(@triangleSize: 7px, @triangleBottom: -8px, @triangleLeft: 36%, @triangleColor: @gray40) {
 display: block;
 content: "";
 position: absolute;
 bottom: @triangleBottom;
 left: @triangleLeft;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-color: @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize 0;
}

// Tooltip Triangle
// --------------------------------------------------
.tooltip-triangle-base() {
 display: block;
 content: "";
 position: absolute;
 width: 0px;
 height: 0px;
 border-style: solid;
}

.tooltip-triangle-border() {
 display: block;
 content: "";
 position: absolute;
 width: 0px;
 height: 0px;
 border-style: solid;
}

.tooltip-triangle-base-t(@triangleSize: 7px, @triangleColor: @white) {
 top: 1px;
 left: -7px;
 border-color: transparent transparent @triangleColor ;
 border-width: 0 @triangleSize @triangleSize;
}

.tooltip-triangle-border-t(@triangleSize: 8px, @triangleColor: @gray30) {
 border-color: transparent transparent @triangleColor;
 border-width: 0 @triangleSize @triangleSize;
}

.tooltip-triangle-base-r(@triangleSize: 7px, @triangleColor: @white) {
 top: -7px;
 right: 1px;
 border-color: transparent transparent transparent @triangleColor;
 border-width: @triangleSize 0 @triangleSize @triangleSize;
}

.tooltip-triangle-border-r(@triangleSize: 8px, @triangleColor: @gray30) {
 border-color: transparent transparent transparent @triangleColor;
 border-width: @triangleSize 0 @triangleSize @triangleSize;
}

.tooltip-triangle-base-b(@triangleSize: 7px, @triangleColor: @white) {
 left: -7px;
 bottom: 1px;
 border-color: @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize 0;
}

.tooltip-triangle-border-b(@triangleSize: 8px, @triangleColor: @gray30) {
 border-color: @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize 0;
}

.tooltip-triangle-base-l(@triangleSize: 7px, @triangleColor: @white) {
 left: 1px;
 bottom: -7px;
 border-color: transparent @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize @triangleSize 0;
}

.tooltip-triangle-border-l(@triangleSize: 8px, @triangleColor: @gray30) {
 border-color: transparent @triangleColor transparent transparent;
 border-width: @triangleSize @triangleSize @triangleSize 0;
}

// Border
// --------------------------------------------------
.border-tb(@whidth: 1px, @style: solid, @topcolor: @black, @bottomcolor: @black) {
 border-top: @whidth @style @topcolor;
 border-bottom: @whidth @style @bottomcolor;
}

.border-rl(@whidth: 1px, @style: solid, @rightcolor: @black, @leftcolor:@black) {
 border-right: @whidth @style @rightcolor;
 border-left: @whidth @style @leftcolor;
}

.border-rbl(@whidth: 1px, @style: solid, @rightcolor: @black, @bottomcolor: @black, @leftcolor:@black) {
 border-right: @whidth @style @rightcolor;
 border-bottom: @whidth @style @bottomcolor;
 border-left: @whidth @style @leftcolor;
}

.border-multi-color(@whidth: 1px, @style: solid, @color: @black @black @black @black) {
 border-width: 1px;
 border-style: solid;
 border-color: @color;
}

// Opacity
// --------------------------------------------------

.opacity(@opacity:1) {
 @ie-opacity: (@opacity * 100);
 filter: ~"alpha(opacity=@{ie-opacity})";
 opacity: @opacity;
}