// ==========================================================================
// Mixins
// Thanks to @sutterlity
// https://github.com/sutter/POPY-Starter-integration-web/blob/master/scss/tools/_mixins.scss
// ==========================================================================

/**
 * SMACSS Theming
 * @example scss
 * .foobar {
 *   background: #ff3377;
 *   @include theme(beccapurple){
 *     background: #663399;
 *   }
 * }
 * @param {String} $name - theme name
 */

@mixin theme($name) {
  @if $theme == $name {
     @content;
  }
}

/**
 * Buttons
 * This customises your buttons with a different background color and text color.
 * If no text color is specified it will default to white.
 * @param {String} $color-background - background color
 * @param {String} $color-text (#fff) - text color
 * @example scss
 * .foobar { @include btn(#f37) { ... } }
 */

@mixin btn($color-background, $color-text: #fff) {
  background-color: $color-background;
  border-color: darken($color-border, 6%);
  color: $color-text;
}

/**
 * Media Queries
 * Allows you to use inline media queries.
 * @link http://jakearchibald.github.com/sass-ie/
 * @param {String} $breakpoint - breakpoint
 * @param {String} $query (min-width) - query type
 * @param {String} $type (screen) - media type
 * @example scss
 * .foobar { @include mq(20em) { ... } }
 */

@mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { // breakpoint can be a variable
  // if media queries are not supported
  @if $fix-mqs {
    @if $fix-mqs >= $breakpoint { // ...and if the fixed breakpoint is greater than query...
      @content; // ...output the content the user gave us.
    }
  }
  // Otherwise, output it using a regular media query
  @else {
    @media #{$type} and (#{$query}: #{$breakpoint}) { @content; }
  }
 }

/**
 * IE Specific Styles
 * @example scss
 * .foobar {
 *   .lt-ie8 & { @include old-ie { ... } }
 *   .lt-ie9 & { @include old-ie { ... } }
 * }
 */

@mixin old-ie {
  @if $old-ie {
     @content;
  }
}

/**
 * Sass version of Sticky Footer by Ryan Fait
 * @link http://ryanfait.com/sticky-footer/
 * @param {String} $footer_height - height of footer including padding or borders
 * @param {String} $root_selector (.site) - main wrapper element
 * @param {String} $root_footer_selector (.push) - hidden element that "pushes" down the footer
 * @param {String} $footer_selector (footer) - footer element
 * @example scss
 * .foobar { @include sticky-footer(4em) { ... } }
 */

@mixin sticky-footer($footer_height, $root_selector:".site", $root_footer_selector:".push", $footer_selector:"footer") {
  html, body {height: 100%;}
  #{$root_selector} {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -#{$footer_height};
    #{$root_footer_selector} {
      height: #{$footer_height};
    }
  }
  #{$footer_selector} {
    clear: both;
    position: relative;
    height: #{$footer_height};
  }
}

/**
 * Fullscreen Background for < IE8
 * @link http://css-tricks.com/perfect-full-page-background-image/
 * @example scss
 * .foobar { @include fullscreen-bg() { ... } }
 */

@mixin fullscreen-bg() {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
  }
}

/**
 * @param {number} $opacity
 * @example scss
 * .foobar { @include opacity(4) { ... } }
 */
@mixin opacity($opacity) {
  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  opacity: $opacity;

  /* Hack IE6 */
  .lt-ie7 & {
    filter : alpha(opacity=#{round($opacity * 100)});
    zoom: 1;
  }
}

/**
 * @link http://bit.ly/thoughtbot-bourbon-inline-block
 * @require {mixin} old-ie
 * @param {String} $alignment (baseline)
 * @example scss
 * .foobar { @include inline-block() { ... } }
 */

@mixin inline-block($alignment: baseline) {
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  @include old-ie {
    zoom:1;
    *display:inline;
    *vertical-align:auto;
  }
}

/**
 * Retina Displays
 * @param {String} $image - image url
 * @param {String} $width - image width
 * @param {String} $height - image height
 * @example scss
 * .foobar { @include image-2x('img/logo.png', 200px, 300px) { ... } }
 */

@mixin image-2x($image, $width, $height) {

  @media (min--moz-device-pixel-ratio: 1.3),
        (-o-min-device-pixel-ratio: 2.6/2),
        (-webkit-min-device-pixel-ratio: 1.3),
        (min-device-pixel-ratio: 1.3),
        (min-resolution: 1.3dppx) {

    // on retina, use an image that's scaled by 2
    background-image: url($image);
    background-size: $width $height;
  }
}

/**
 * RGBA Fallback
 * @param {String} $color
 * @param {String} $percent
 * @example scss
 * .foobar { @include rgba-bg(#f37,.9) { ... } }
 */

@mixin rgba-bg($color, $percent) {
  background: $color;
  background: rgba($color, $percent);
}