/* Mixins */

.border-radius (
  @radius: 5px
) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-radius-custom (
  @topleft: 5px,
  @topright: 5px,
  @bottomleft: 5px,
  @bottomright: 5px
) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
}

.box-shadow (
  @x: 0px,
  @y: 3px,
  @blur: 5px,
  @alpha: 0.5
) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

.text_shadow(
  @amount: 1px,
  @color: #fff
) {
  text-shadow: 0 @amount 0 @color;
}

.opacity(
  @op:100
) {
  filter: alpha(opacity=@op);
  -moz-opacity: @op/100;
  -khtml-opacity: @op/100;
  opacity: @op/100;
}

.transition (
  @prop: all,
  @time: 1s,
  @ease: linear
) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}

.transform (
  @rotate: 90deg,
  @scale: 1,
  @skew: 1deg,
  @translate: 10px
) {
  -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

.skew (
  @x: 35,
  @y: 0
) {
  -webkit-transform: skew(formatstring("{0}deg", @x), formatstring("{0}deg", @y));
  -moz-transform: skew(formatstring("{0}deg", @x), formatstring("{0}deg", @y));
  -o-transform: skew(formatstring("{0}deg", @x), formatstring("{0}deg", @y));
  -ms-transform: skew(formatstring("{0}deg", @x), formatstring("{0}deg", @y));
  transform: skew(formatstring("{0}deg", @x), formatstring("{0}deg", @y));
}

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

.rotate (
  @deg:35
) {
  -webkit-transform: rotate(formatstring("{0}deg", @deg));
  -moz-transform: rotate(formatstring("{0}deg", @deg));
  -o-transform: rotate(formatstring("{0}deg", @deg));
  -ms-transform: rotate(formatstring("{0}deg", @deg));
  transform: rotate(formatstring("{0}deg", @deg));
}

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

.gradient (
  @origin: left,
  @start: #ffffff,
  @stop: #000000
) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}

.quick-gradient (
  @origin: left,
  @alpha: 0.2
) {
  background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

.ribbon (
  @height: 44px,
  @color: #FF2F96,
  @shadow-color: #e5e5e5,
  @shadow-size: 5px
) {
  /*
   * The height amount must be even.
   *
   * The HTML needs to look like this:
   *
   * <hX>
   *     <a href="">Ribbon Text</a>
   *     <span></span>
   * </hX>
   *
   */
  position: relative;
  &:before {
    z-index: 43;
    content: "";
    background-color: @color;
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    bottom: 0;
    left: 0px;
  }
  a {
    z-index: 40;
    background-color: @color;
    height: @height;
    line-height: @height;
    display: inline-block;
    text-decoration: none;
    position: relative;
    padding-left: @height;
    padding-right: @height/2;
    text-shadow: 0px 1px 0px darken(@color, 30%);
    .box-shadow (8px, @shadow-size, 0px, 0.8);
    .border-radius-custom (2px, 0px, 0px, 0px);
    -webkit-background-clip: padding-box;
    &:after {
      content: "";
      border: @height/2 solid @color;
      border-right-color: transparent;
      display: block;
      height: 0px;
      width: 0px;
      position: absolute;
      top: 0;
      right: -2 * (@height/2);
    }
    &:before {
      content: "";
      border: @height/2 solid @shadow-color;
      border-right-color: transparent;
      display: block;
      height: 0px;
      width: 0px;
      position: absolute;
      top: @shadow-size;
      right: -2 * (@height/2) - 2px;
    }
  }
  span {
    &:after {
      z-index: 42;
      content: "";
      position: absolute;
      bottom: -7px;
      left: -6px;
      display: block;
      height: 0px;
      width: 0px;
      border: 7px solid black;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
    &:before {
      z-index: 41;
      content: "";
      position: absolute;
      bottom: -8px;
      left: -8px;
      display: block;
      height: 0px;
      width: 0px;
      border: 8px solid @color;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
  }
}

/* Custom */



// mixins
.no_margin_padding {
  margin: 0;
  padding:0;
}

.border_radius (@radius:5px) {
  -webkit-border-radius: @radius;
  border-radius: @radius;

  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.box_shadow (@left, @top, @blur_radius, @spread_radius, @color:rgba(0,0,0,0.5)) {
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}
.box_shadow_inset (@left, @top, @blur_radius, @spread_radius, @color:rgba(0,0,0,0.5)) {
  -webkit-box-shadow: inset @left @top @blur_radius @spread_radius @color;
  box-shadow: inset @left @top @blur_radius @spread_radius @color;
}