//
// Mixins
// --------------------------------------------------

// General
// --------------------------------------------------

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
@mixin clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

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

// Gradients

// From top to bottom
@mixin linear-gradient($color-from, $color-to) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
  background-image:         linear-gradient(to bottom, $color-from 0%, $color-to 100%);  // W3C
}

// From left to right
@mixin split-linear-gradient($color-from, $color-to) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%,$color-from), color-stop(50%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(left, $color-from 50%, $color-to 50%); // Chrome10+, Safari5.1+
  background-image:         linear-gradient(to right, $color-from 50%, $color-to 50%); // W3C
}

// From bottom left to top right
@mixin directional-gradient($color-from, $color-to, $deg: 45deg) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient($deg, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
  background-image:    -moz-linear-gradient($deg, $color-from 0%, $color-to 100%);           // FF3.6+
  background-image:         linear-gradient($deg, $color-from 0%, $color-to 100%);     // W3C
}