//==============================================================================
// LAYOUT
//==============================================================================

@mixin _placeholder() {
    ::-webkit-input-placeholder {
        @content;
    }

    input:-moz-placeholder {
        @content;
    }

    input:-ms-input-placeholder {
        @content;
    }
}



@mixin _selection() {
    ::-moz-selection {
        @content;
    }

    ::selection {
        @content;
    }
}



@mixin _img-selection() {
    image::-moz-selection {
        @content;
    }

    image::selection {
        @content;
    }
}





//==============================================================================
// TYPOGRAPHY
//==============================================================================

// Headers & vertical rhythm
@mixin headers($size){
    @include rem(font-size, ($size * $basefont) );
    @include rem(margin, 0 0 (strip-units($verticalspace) * 1px) );
}



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



// Word Wrapping
@mixin word-wrap{
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}



//==============================================================================
// UI
//==============================================================================

@mixin arrow($width: 20px, $height: 20px, $direction: up, $color: red) {

    width: 0;
    height: 0;

    // Right
    @if $direction == right {
        border-top: $height/2 solid transparent;
        border-bottom: $height/2 solid transparent;
        border-left: $width solid $color;
    }

    // Left
    @if $direction == left {
        border-top: $height/2 solid transparent;
        border-bottom: $height/2 solid transparent;
        border-right: $width solid $color;
    }

    // Up
    @if $direction == up {
        border-left: $width/2 solid transparent;
        border-right: $width/2 solid transparent;
        border-bottom: $height solid $color;
    }

    // Down
    @if $direction == down {
        border-left: $width/2 solid transparent;
        border-right: $width/2 solid transparent;
        border-top: $height solid $color;
    }
}




//==============================================================================
// HELPERS
//==============================================================================

// REM MIXIN
// Baseline, measured in pixels
// The value should be the same as the font-size value for the html element
/*
.foo {
  @include rem('border', 1px, solid red);
  @include rem('margin', 1px 20px 2px 5px);
  @include rem('font-size', 10px);
}

In main.css
.foo {
  border: 0.0625rem solid red;
  margin: 0.0625rem 1.25rem 0.125rem 0.3125rem;
  font-size: 0.625rem;
}

In ie.css
.foo {
  border: 1px solid red;
  margin: 1px 20px 2px 5px;
  font-size: 10px;
}

*/

@mixin rem($property, $px-values, $extra: null) {
    // Convert the baseline into rems
    $baseline-rem: 16px / 1rem;

    // If there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number" {
        #{$property}: $px-values / $baseline-rem #{$extra};
    } @else {
        // Create an empty list that we can dump values into
        $rem-values: unquote("");
        @each $value in $px-values {
        // If the value is zero, return 0
            @if $value == 0 or $value == 'auto' {
                $rem-values: append($rem-values, $value);
            } @else {
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values #{$extra};
    }
}



// Animation
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content
    }
    @-moz-keyframes #{$name} {
        @content
    }
    @-ms-keyframes #{$name} {
        @content
    }
    @-o-keyframes #{$name} {
        @content
    }
    @keyframes #{$name} {
        @content
    }
}



// http://codepen.io/ahmedelgabri/pen/bsIhF
// http://gabri.me/2013/05/sass-mixin-for-auto-numbering-with-css/
@mixin auto-numbers($numbered-element, $sep, $counter: item, $nested-parent: null ){
    $sel: ();
    @if $nested-parent {
        $sel: append($sel, unquote($nested-parent));

        #{$nested-parent}{
            list-style: none;
            margin-left: 0;
        }
    }
    $sel: append($sel, unquote('&'), comma);

    #{$sel}{
        counter-reset: #{$counter};
        > #{$numbered-element}{
            &:before{
                counter-increment: #{$counter};
                content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}) "#{$sep} ") ;
            }
        }
    }
}





//==============================================================================
// DEBUG
//==============================================================================

@mixin debug-display{
    @if $debug {
        display: normal !important;
    } @else {
        display: none;
    }
}





//==============================================================================
// MEDIA QUERIES
//==============================================================================

@mixin mq( $point ) {
    $query: map-get($breakpoints, $point);

    @if not $query {
        @warn "Oh shit! You are requesting an invalid breakpoint: `#{$point}`. :(";
    } @else {
        @media screen and ( nth($query,1): (nth($query,2) / 16) + em ) {
            @content;
        }
    }
}