/**
 * mixins
 *
 * @section mixins
 */

@mixin font-size ($size: 16) {
  font-size: ($size / $base)+em;
  margin-bottom: (12 / $size)+em;
}

@mixin box-sizing ($type: border-box) {
	-webkit-box-sizing: $type;
	-moz-box-sizing:    $type;
	box-sizing:         $type;
}

@mixin rounded-corners($radius: 4px 4px 4px 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin gradient($from, $to) {
  background-color: $to;
  background-image: -moz-linear-gradient($from, $to);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  background-image: -webkit-linear-gradient($from, $to);
  background-image: -o-linear-gradient($from, $to);
}

@mixin footer($background) {
  padding: $gutter-width $two-col $gutter-width $four-col;
  margin-bottom: 0;
  background: url($background) no-repeat scroll $one-col center #F7F7F7;
}

@mixin clearfix() {
  *zoom:1;

  &:before,
  &:after {
      content:"";
      display:table;
  }
  &:after {
      clear:both;
  }
}

// CSS3 colunms
@mixin columns($num: 3, $gap: 20) {
  -moz-column-count: $num;
  -moz-column-gap: ($gap / $base)em;
  -webkit-column-count: $num;
  -webkit-column-gap: ($gap / $base)em;
  column-count: $num;
  column-gap: ($gap / $base)em;
}

// background-size
@mixin background-size($size: 100% 100%) {
  -moz-background-size: $size;
  -webkit-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

// transitions
@mixin transition($properties: all, $duration: .5s, $method: ease-out) {
    -webkit-transition: $properties $duration $method;
    -moz-transition: $properties $duration $method;
    -ms-transition: $properties $duration $method;
    -o-transition: $properties $duration $method;
    transition: $properties $duration $method;
}
// usage: @include transition(all, 0.3s, ease-in-out);