/* ============================================================================
   @CORE -> MIXINS -> GRADIENTS
   ========================================================================= */


/**
 * Some simple gradients.
 */


/**
 * Linear gradient accepting two colours, directional keywords (default
 * direction is `bottom`), and an optional IE 9 fallback.
 *
 * @example
   .foo {
     @include linear-gradient(blue, red);
   }

   .foo {
     @include linear-gradient(blue, red, left);
   }

   .foo {
     @include linear-gradient(blue, red, top left);
   }

   .foo {
     @include linear-gradient(blue, red, top right);
   }

   .foo {
     @include linear-gradient(blue, red, bottom left);
   }

   .foo {
     @include linear-gradient(blue, red, bottom right);
   }

   .foo {
     @include linear-gradient(blue, red, top, true);
   }
 */


@mixin linear-gradient($from, $to, $dir: bottom, $ie-9-fallback: false) {

  background-image: linear-gradient(to $dir, $from, $to);

  // IE 9 fallback
  // N.B. this won't work with rounded corners as the `-ms-filter` will overlap
  // them
  @if $ie-9-fallback {
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#{ie-hex-str($from)}',
      endColorstr='#{ie-hex-str($to)}')
    );
  }
}


/**
 * Radial gradient accepting two colours.
 *
 * @example
   @include radial-gradient(blue, red);
 */

@mixin radial-gradient($inner-color, $outer-color) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}