@import "variables";

.clearfix() {
  &:before, &:after { display: table; content: ""; line-height: 0; }
  &:after { clear: both; }
}

.size(@width, @height) {
  width: @width;
  height: @height;
}

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

.topLeft(@top, @left) {
  top: @top;
  left: @left;
}

.topRight(@top, @right) {
  top: @top;
  right: @right;
}

.bottomLeft(@bottom, @left) {
  bottom: @bottom;
  left: @left;
}

.bottomRight(@bottom, @right) {
  bottom: @bottom;
  right: @left;
}

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
          transform: scale(@ratio);
}
.scale2(@w, @h) {
  -webkit-transform: scale(@w, @h);
      -ms-transform: scale(@w, @h);
          transform: scale(@w, @h);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skew(@x, @y);
          transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

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

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

.horizontal-gradient(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    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(to right, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
}
.vertical-gradient(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    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(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
}
.directional-gradient(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    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); // Standard, IE10
}
.vertical-three-colors-gradient(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    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: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
}
.radial-gradient(@innerColor: #555, @outerColor: #333)  {
    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: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
}
.striped-gradient(@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: -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);
}

.trans(@property: all, @options: @defaultTransitionOptions) {
  transition: @property @options;
}

.webkit-scrollbar() {
  &::-webkit-scrollbar {
    width: 11px;
    background-color: transparent;
    background-clip: content-box;
  }
  &::-webkit-scrollbar-button {
    background-color: transparent;
  }
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border: solid transparent;
    border-width: 1px 1px 1px 2px;
    background-color: #c5c5c5;
    background-clip: content-box;

    &:hover {
      background-color: darken(#ccc, 5%);
    }
  }
  &::-webkit-scrollbar-track {
    border: solid #fff;
    border-width: 1px 1px 1px 2px;
    background-color: #fff;
    background-clip: content-box;
  }
  &::-webkit-scrollbar-track-piece {
    border-left: 1px solid #ccc;
    background-color: transparent;
  }
}

@retina: ~"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";