//---------------------------------------
// Mixins

// RGBA color with RGB fallback
@mixin rgba-bg-color($r, $g, $b, $a) {
    background: rgb($r, $g, $b); // Fall-back for browsers that don't support rgba
    background: rgba($r, $g, $b, $a);
}

@mixin rgba-bg-color-hex($hex, $a) {
    background: $hex; // Fall-back for browsers that don't support rgba
    background: rgba($hex, $a);
}

@mixin rgba-color($r, $g, $b, $a) {
	color: rgb($r, $g, $b); // Fall-back for browsers that don't support rgba
    color: rgba($r, $g, $b, $a);
}

// Background size w/ browser support
@mixin background-size($size) {
	-webkit-background-size: $size;
	-moz-background-size: $size;
	-o-background-size: $size;
	background-size: $size;
}

@mixin box-sizing($value) {
    -moz-box-sizing: $value;
    -webkit-box-sizing: $value;
    box-sizing: $value;
}

@mixin transition-background($value) {
    -webkit-transition: background $value ease;
    -moz-transition: background $value ease;
    -o-transition: background $value ease;
    transition: background $value ease;
}

@mixin link-variant($link-color: $link-base-color, $link-hover-color: $link-base-hover-color, $link-decoration: none, $link-hover-decoration: underline) {
    color: #{$link-color};
    text-decoration: #{$link-decoration};
    
    &:hover,
    &:focus {
        color: #{$link-hover-color};
        text-decoration: #{$link-hover-decoration};
    }
}

@mixin cn-button-variant($font-color: null, $bg-color : null, $font-color-hover : null, $bg-color-hover : null, $font-color-active : null, $bg-color-active : null) {
    color: $font-color;
    background-color: $bg-color;

    @if ($font-color-hover == null) {
        $font-color-hover: $font-color;
    }

    @if ($bg-color-hover == null and $bg-color != null) {
        @if (lightness($bg-color) < 25) {
            $bg-color-hover: lighten($bg-color, 10%);
        }
        @else {
            $bg-color-hover: darken($bg-color, 10%);
        }
    }
    
    @if ($bg-color-active == null and $bg-color-hover != null) {
        @if (lightness($bg-color-hover) < 25) {
            $bg-color-active: lighten($bg-color-hover, 10%);
        }
        @else {
            $bg-color-active: darken($bg-color-hover, 10%);
        }
           
    }
    
    &:hover {
        color: $font-color-hover;
        background-color: $bg-color-hover;
        text-decoration: none;
    }
    
    &:focus,
    &.focus,
    &:active,
    &.active,
    &:visited
    &.visited {
        color: $font-white;
        background-color: $bg-color-active;
        text-decoration: none;
    }
}

@mixin anim-link-fade() {
    @include transition-duration(0.25s);
}

@mixin clearfix() {
    &:before,
    &:after {
        content: " "; // 1
        display: table; // 2
    }
    &:after {
        clear: both;
    }
}

@mixin ul-reset($reset-font: null) {
    margin: 0;
    padding: 0;

    li {
        position: inherit;
        margin:0;

        &:before {
            @if ($reset-font == null) {
                font-family: inherit;
                font-size: inherit;
                content: none;
            }

            position: static;
            top: auto;
            left: auto;
        }
    }
}

@mixin ul-menu($reset-font: null) {
    @extend .clearfix;
    @include ul-reset($reset-font);

    list-style: none;

    li {
        float: left;

        &:not(.nav-my-favorites):before {
            content: none;
        }

        &:not(:last-child):after
        ,&:not(.nav-my-favorites):after {
            content: "|";
            margin: 0 $margin-horz;
            display: inline-block;
        } 
    }
}



//use custom display-flex mixin as core mixin doesn't output -ms-flexbox
@mixin fp-display-flex($display: flex) {
    //display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    //display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    //display: -ms-flexbox; /* TWEENER - IE 10 */
    //display: -webkit-flex; /* NEW - Chrome */
    //display: flex;

    //@debug $display;
    $display-part1: nth($display, 1);
    $display-part2: null;
    @if(length($display) > 1) {
        $display-part2: nth($display, 2);
    }

    @if $display-part1 == flex {
        display: -webkit-box $display-part2; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box $display-part2; /* OLD - Firefox 19- (buggy but mostly works) */
    }
    display: #{"-ms-" + $display-part1 + "box"} $display-part2; /* TWEENER - IE 10 */
    display: #{"-webkit-" + $display}; /* NEW - Chrome */
    display: $display;
}

@mixin fp-flexbox($properties) {
    //if there is a display property we need to use custom fp-display-flex mixin to output
    @if map-has-key($properties, display) {
        @include fp-display-flex(map-get($properties, display));
        $properties: remove($properties, display);
    }

    @if length($properties) > 0 {
        @for $version from 1 through 3 {
            @include flexbox($properties, $version: $version);
        }
    }
}

@mixin fp-flex-align-items($align) {
    $ms-align: start;
    @if($align == flex-end) {
        $ms-align: end; // IE10
    }
    -ms-flex-align: $ms-align; // IE10
    -webkit-align-items: $align; // Safari / iOS
    align-items: $align;
}