/*************************
***** Mixin Library ******
**** Version: 0.0.2 ******
*************************/


// Box sizing

@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


// Horizontal centering
// Quickly center any element within its parent. Requires width or max-width to be set.

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin vendorize($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false;
  $prefix-for-mozilla:   false;
  $prefix-for-microsoft: false;
  $prefix-for-opera:     false;
  $prefix-for-spec:      false;
}

/* Image Rendering 
========================= */

@mixin image-rendering ($mode:optimizeQuality) {

  @if ($mode == optimize-contrast) {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
  } @else {
    image-rendering: $mode;
  }
}

/* Fixes and Resets
========================= */

* {
  &:first-child + html {

    .row, 
    .clearfix {
      zoom: 1;
    }

  }

  @include vendorize(box-sizing, border-box);

  &:after, 
  &:before {
    @include vendorize(box-sizing, border-box);
  }

}

/* Breakpoints 
========================= */

@mixin breakpoint($point, $value: 0) {
  @if $point == xlarge {
    @media (min-width: em(1392)) { 
      @content; 
    }

  } @else if $point == large {
    @media (min-width: em(1030)) { 
      @content; 
    }

  } @else if $point == medium {
    @media (min-width: em(888)) { 
      @content; 
    }
  } @else if $point == small {
    @media (min-width: em(600))  { 
      @content; 
    }
  } @else if $point == xsmall {
    @media (min-width: em(480))  { 
      @content; 
    }
  } @else if $point == retina {
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5)  { 
      @content; 
    }
  } @else if $point == xlarge-retina {
    @media (min-width: em(1392)) and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { 
      @content; 
    }
  } @else if $point == large-retina {
    @media (min-width: em(1030)) and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { 
      @content; 
    }
  } @else if $point == medium-retina {
    @media (min-width: em(888)) and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { 
      @content; 
    }
  } @else if $point == small-retina {
    @media (min-width: em(600)) and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { 
      @content; 
    }
  } @else if $point == xsmall-retina {
    @media (min-width: em(480)) and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { 
      @content; 
    }
  } @else if $point == hdpi($ratio: 1.3) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
    only screen and (min-resolution: #{round($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx) { 
      @content; 
    }
  } @else {
    @media ($point: $value) { 
      @content; 
    }
  }
}

@mixin between-breakpoints($min, $max) {

  @media (min-width: $min) and (max-width: $max) {
    @content;
  }

}

/* Retina Displays 
========================= */

@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 image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}


/* Clearfix Hack 
========================= */

@mixin clearfix() {
  & {
    *zoom: 1;
  }

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

  &:after {
    clear: both;
  }

}

/* Visually Hidden Focusable
============================== */

.visuallyhidden.focusable {

  &:active, 
  &:focus {
    position: static;
    clip: auto;
    height: auto;
    width: auto;
    margin: 0;
    overflow: visible;
  }

}

/* Clear Floats 
========================= */
@mixin clear() {
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }

  &:after {
    clear: both;
  }

}


/***************************
**** Component Settings ****
***************************/

/* Border Radius
========================= */

@mixin border-radius($radius) {
  @include vendorize(border-radius, $radius);
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  @include vendorize(border-top-right-radius, $radius);
  @include vendorize(border-top-left-radius, $radius);
  background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  @include vendorize(border-bottom-right-radius, $radius);
  @include vendorize(border-top-right-radius, $radius);
  background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  @include vendorize(border-bottom-right-radius, $radius);
  @include vendorize(border-bottom-left-radius, $radius);
  background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  @include vendorize(border-bottom-left-radius, $radius);
  @include vendorize(border-top-left-radius, $radius);
  background-clip: padding-box;
}

/* Opacity - with IE8 fallback
============================== */

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

/* Center-align a block level element
===================================== */

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Text Overflow
============================== */

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Absolute Positioned
============================== */

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

/* Offscreen Text
============================== */

@mixin linkTextOffscreen() {
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  font-size: 0;
  text-align: start;
}

/* :hover, :active, :focus Styles
============================== */

@mixin hoveractivefocus($property, $value) {
  &:hover, &:active, &:focus {
    #{$property}: $value;
  }
}

/* Image Path
============================== */
$imagePath:   '../img/' !default;


/* Large
============================== */
@mixin large {
  padding: em(14) em(24);
  font-size: em(18);
  text-align:center;
}

@mixin remove-bottom {
  margin-bottom: 0;
}

@mixin half-bottom {
  margin-bottom: .625em;
}

@mixin add-bottom {
  margin-bottom: $spacing;
}

/* Callout
============================== */

@mixin callout {
  background-color: $black-10;
  padding: ($base-unit * 2);
  width: 100%;
}

/* Link List
============================== */

@mixin link-list {
  width: 100%;

  li {
    width: auto;
    float: left;
    margin: 0 ($base-unit * 2) 0 0;

    &:last-child {
      margin: 0;
    }

  }

}

/* Type setting
============================== */

@mixin type-setting($target, $line-height, $context: null) {
 
    // Is the target value unitless?
    @if unitless($target) {
 
        // Is it relying on a context value?
        @if $context != null {
 
            // Is the context unitless? If so, write out the target value in ems.
            @if unitless($context) {
                font-size: ($target / $context) * 1em;
            } @else {
                @error 'Your value for `$context` is not unitless.';
            }
        }
        // Write out the target value in rems.
        @else {
            font-size: ($target / $root-font-size) * 1rem;
        }
 
    } @else {
        @error 'Your value for `$target` is not unitless.';
    }
 
    // Line Height should be unitless.
    @if unitless($line-height) {
        // Line height should almost always be unitless, just simple math.
        line-height: ($line-height / $target);
    } @else {
        @error 'Your value for `$line-height` is not unitless.';
    }
 
}

/* Functions
========================= */

@function em($target, $context: $basefont) {
  @return ($target / $context) * 1em;
}


/* Font Sizing
========================= */

@mixin font-size($sizevalue: 16) {
  font-size: $sizevalue + px; //fallback for old browsers
  font-size: em($sizevalue);
  font-size: (.125 * $sizevalue) + rem;
}

@mixin line-height($heightvalue: 24) {
  line-height: $heightvalue + px; //fallback for old browsers
  line-height: (24 / $basefont);
  line-height: (.125 * $heightvalue) + rem;
}

/* Google Web Fonts
================================================== */
/* Google Web Font Mixin by Ross Penman - http://rosspenman.com/sass-web-fonts
*/

@mixin web-font($fonts, $variants: (), $subsets: (), $text: '', $effects: (), $secure: false) {

  //The $secure var defaults to false, the $url var is inited to use http
  $url: 'http://fonts.googleapis.com/css?family=';

  //If flagged secure, import fonts using https
  @if $secure {
    $url: 'https://fonts.googleapis.com/css?family=';
  }

  $i: 0;
  
  // Add the family argument to the URL string.
  // We can assume that the user will always specify at least one font.
  @each $font in $fonts {
    $i: $i + 1;
  
    // Add the name of the font.
    $j: 0;
    @each $word in $font {
      $j: $j + 1;
      $url: $url + $word;
      
      // Add a plus symbol between words.
      @if $j < length($font) {
        $url: $url + '+';
      }
    }
    
    // If there is/are font variant(s) for this font, add them.
    @if $j <= length($variants) {
      $url: $url + ':';
    
      $k: 0;
      @each $variant in nth($variants, $j) {
        $k: $k + 1;
        
        $url: $url + $variant;
        
        // Add a comma between variants.
        // For some reason length($variant) doesn't work. Weird!
        @if ($k < length(nth($variants, $j))) {
          $url: $url + ',';
        }
      }
    }
    
    // Add a pipe between words.
    // It would seem that a pipe isn't a valid URL character in its unescaped form,
    // but Google reccommend using it anyway.
    @if $i < length($fonts) {
      $url: $url + '|';
    }
  }
  
  // Add the subset argument to the URL string, if it exists.
  @if length($subsets) > 0 {
    $url: $url + '&subset=';
    $i: 0;
    @each $subset in $subsets {
      $i: $i + 1;
      $url: $url + $subset;
      
      // Add a comma between subsets.
      @if $i < length($subsets) {
        $url: $url + ',';
      }
    }
  }
  
  // Add the text argument to the URL string, if it exists.
  // $text does not actually need to be enclosed in brackets.
  @if length($text) > 0 and $text != '' {
    
    // To save the user the hassle of adding a space character every time they want
    // to use a web font, we add one automatically.
    $url: $url + "&text=%20#{$text}";
  }
  
  // Add the effect argument to the URL string, if it exists.
  @if length($effects) > 0 {
    $url: $url + '&effect=';
    $i: 0;
    @each $effect in $effects {
      $i: $i + 1;
    
      // Add the name of the font.
      $j: 0;
      @each $word in $effect {
        $j: $j + 1;
        $url: $url + $word;
        
        // Add a hyphen between words.
        // A hyphen can actually be used to seperate words instead of a space,
        // in which case the words will be counted as one and no extra hyphens will be added.
        // Again, a string replacement function would make this a lot easier…
        @if $j < length($effect) {
          $url: $url + '-';
        }
      }
      
      // Add a pipe between effects.
      @if $i < length($effects) {
        $url: $url + '|';
      }
    }
  }
  
  // Finally!
  @import url(#{$url});
}


/* Font Awesome
============================== */

@mixin fa-icon() {
  display: inline-block;
  font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0); // ensures no half-pixel rendering in firefox

}

@mixin fa-icon-rotate($degrees, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
          transform: rotate($degrees);
}

@mixin fa-icon-flip($horiz, $vert, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  -webkit-transform: scale($horiz, $vert);
      -ms-transform: scale($horiz, $vert);
          transform: scale($horiz, $vert);
}
