///////////////////////////////////////////////////////////////////////////////
// # Font Face mixin
//
// @usage `@include font-face("Font Name", "font-name", normal, normal);`
///////////////////////////////////////////////////////////////////////////////
@mixin font-face($family, $src, $weight: normal, $style: normal) {
  $path: "#{$path-font}/#{$src}";
  @font-face {
    font-family: $family;
    src: url("#{$path}.eot");
    src: url("#{$path}.eot?#iefix") format("embedded-opentype"),
         url("#{$path}.woff") format("woff"),
         url("#{$path}.ttf") format("truetype"),
         url("#{$path}.svg##{$family}") format("svg");
    font-style: $style;
    font-weight: $weight;
  }
}




///////////////////////////////////////////////////////////////////////////////
// # Breakpoint mixin
//
// @usage `@include break(medium) { .selector {} }`
///////////////////////////////////////////////////////////////////////////////
@mixin break($point) {
  @if $point == small {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $point == not-small {
    @media only screen and (min-width: $break-small + 1) { @content; }
  }
  @else if $point == medium {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $point == large {
    @media only screen and (min-width: $break-large) { @content; }
  }
}




///////////////////////////////////////////////////////////////////////////////
// # Retina display mixin
//
// @usage `@include retina() { .selector{} }`
///////////////////////////////////////////////////////////////////////////////
@mixin retina() {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2/1),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    @content;
  }
}




///////////////////////////////////////////////////////////////////////////////
// # Shortcut to create the base of a pseudo-element (:after, :before)
// You can set any position and dimension you want
//
// @param   String $selector  "after" or "before" selector
// @param   List $args        List containing the object's position and size
// e.g.
//    @include pseudo-content(after, top left width 100% height 100%) { };
//    @include pseudo-content(before, bottom 10px width 500px height 20px) { };
//    @include pseudo-content(before, width 50px height 10px) { };
///////////////////////////////////////////////////////////////////////////////
@mixin pseudo-content($selector, $args: ()) {
  &:#{$selector} {
    @include position(absolute, $args, true);
    content: "";
    @content;
  }
}




///////////////////////////////////////////////////////////////////////////////
// # Absolute position
//
// e.g.
//    @include absolute(top right);
//    @include absolute(top 20px right);
//    @include absolute(top 20px right 100px);
//    @include absolute(top right bottom left);
 ///////////////////////////////////////////////////////////////////////////////
@mixin absolute($args: ()) {
  @include position(absolute, $args);
}

///////////////////////////////////////////////////////////////////////////////
// # Fixed position
//
// e.g.
//    @include fixed(top right);
//    @include fixed(top 20px right);
//    @include fixed(top 20px right 100px);
//    @include fixed(top right bottom left);
///////////////////////////////////////////////////////////////////////////////
@mixin fixed($args: ()) {
  @include position(fixed, $args);
}

///////////////////////////////////////////////////////////////////////////////
// # Relative position
//
// e.g.
//    @include relative(top right);
//    @include relative(top 20px right);
//    @include relative(top 20px right 100px);
//    @include relative(top right bottom left);
///////////////////////////////////////////////////////////////////////////////
@mixin relative($args: ()) {
  @include position(relative, $args);
}




///////////////////////////////////////////////////////////////////////////////
// # Position mixin based on Hugo Giraudel's mixin
// ## Includes also shortcuts for "absolute", "fixed" and "relative" positions
///////////////////////////////////////////////////////////////////////////////
@mixin position($position, $args: (), $includeSize: false) {
  $offsets: top right bottom left;

  position: $position;

  @if $includeSize {
    $offsets: join($offsets, (width height));
  }

  @each $offset in $offsets {
    $index: index($args, $offset);

    @if $index {
      @if $index == length($args) {
        #{$offset}: 0;
      }
      @else {
        $next: nth($args, $index + 1);
        @if is-valid-length($next) {
          #{$offset}: $next;
        }
        @else if index($offsets, $next) {
          #{$offset}: 0;
        }
        @else {
          @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
        }
      }
    }
  }
}

@function is-valid-length($value) {
  @return (type-of($value) == "number" and not unitless($value))
       or (index(auto initial inherit 0, $value) != false);
}