@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {
    @each $icon in $iconList {
        #{$prefix}#{$icon} {
            background-position: $x * 1px $y * 1px;
        }
        @if $direction == 'x' {
            $x: $x - 16;
        } @else {
            $y: $y - 16;
        }
    }
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
@mixin linear-gradient($colorList, $direction: 'to right') {
    $percentage: 0;
    $units: '%';
    $count: length($colorList);
    $increment: 100 / ($count - 1);
    $css: #{$direction + ', '};
    $sep: ', ';
    @each $colorItem in $colorList {
        $color: $colorItem;
        @if (length($colorItem) > 1) {
            $color: nth($colorItem, 1);
            $percentage: nth($colorItem, 2);
            $units: '';
        }
        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {
            $sep: '';
        }
        $css: #{$css + $color + ' ' + $percentage + $units + $sep};
        $percentage: $percentage + $increment;
    }
    background: linear-gradient( #{$css} );
}

@mixin grid-unit($span, $numCols: 12, $gutter: 0) {
    $gridPx: 840;
    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);
    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);
    $spanPercent: widthPerc($spanPx, $gridPx);
    $marginPercent: widthPerc($gutter, $gridPx);
    margin-left: $marginPercent;
    width: $spanPercent;
}


@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {
    @if $whatToPrefix == 'property' {
        @each $prefix in $prefixes {
            #{$prefix + $property}: #{$value};
        }
    }
    @else if $whatToPrefix == 'value' {
        @each $prefix in $prefixes {
            #{$property}: #{$prefix + $value};
        }
    }
}

@mixin flex-container($wrapBehavior: nowrap, $direction : row) {
    display: box; // 2009 syntax : FF 21
    // 2012 Syntax
    @include vendor-prefix(display, flexbox, value, (-ms-, -webkit-, ''));
    // Final Syntax
    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));

    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));
    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));

    flex-pack : start; // 2012 syntax : IE10
    -ms-flex-pack: start;
    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));

    flex-line-pack: start; // 2012 syntax : IE10
    -ms-flex-line-pack: start;
    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));

    flex-align: stretch;
    -ms-flex-align: stretch;
    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));
}

@mixin simple-flex-box($width: auto, $minWidth: 1) {

    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));
    flex-item-align: stretch;
    -ms-flex-item-align: stretch;
    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));

    // if both, min width and width are set, width will win this conflict
    @if ($width == auto) {
        @if ($minWidth != 1) {
            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));
        }
        @else {
            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));
            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
            // for a discussion auto vs. main-size
            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));
        }
    }
    @else {
        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));
    }
}


@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {
    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);
}

@mixin simple-border($color: #ddd) {
    border: 1px solid $color;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

@mixin border-radius($radius: 2) {
    -moz-border-radius: $radius * 1px;
    -webkit-border-radius: $radius * 1px;
    border-radius: $radius * 1px;
}

@mixin border-radius-top($radius: 2) {
    -webkit-border-top-left-radius: $radius * 1px;
    -webkit-border-top-right-radius: $radius * 1px;
    -moz-border-radius-topleft: $radius * 1px;
    -moz-border-radius-topright: $radius * 1px;
    border-top-left-radius: $radius * 1px;
    border-top-right-radius: $radius * 1px;
}

@mixin border-radius-bottom($radius: 2) {
    -webkit-border-bottom-right-radius: $radius * 1px;
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-bottomright: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-bottom-right-radius: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

@mixin border-radius-left($radius: 2) {
    -webkit-border-top-left-radius: $radius * 1px;
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-topleft: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-top-left-radius: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

@mixin border-radius-right($radius: 2) {
    -webkit-border-top-right-radius: $radius * 1px;
    -webkit-border-bottom-right-radius: $radius * 1px;
    -moz-border-radius-topright: $radius * 1px;
    -moz-border-radius-bottomright: $radius * 1px;
    border-top-right-radius: $radius * 1px;
    border-bottom-right-radius: $radius * 1px;
}

@mixin border-radius-top-left($radius: 2) {
  -webkit-border-top-left-radius: $radius * 1px;
  -moz-border-radius-topleft: $radius * 1px;
  border-top-left-radius: $radius * 1px;
}

@mixin border-radius-top-right($radius: 2) {
  -webkit-border-top-right-radius: $radius * 1px;
  -moz-border-radius-topright: $radius * 1px;
  border-top-right-radius: $radius * 1px;
}

@mixin border-radius-bottom-right($radius: 2) {
  -webkit-border-bottom-right-radius: $radius * 1px;
  -moz-border-radius-bottomright: $radius * 1px;
  border-bottom-right-radius: $radius * 1px;
}

@mixin border-radius-bottom-left($radius: 2) {
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

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

@function whiten($color, $white: 0.3) {
    @return mix(#fff, $color, ($white * 100) * 1%);
}

@function blacken($color, $black: 0.3) {
    @return mix(#000, $color, ($black * 100) * 1%);
}

@function widthPerc($colWidth, $context) {
    @return ($colWidth * 100 / $context) * 1%
}

@function remDist($fontSizePx) {
    @return ($fontSizePx / 10) * 1rem
}

@function black($alpha: 1) {
    @return (rgba(0, 0, 0, $alpha))
}

@function white($alpha: 1) {
    @return (rgba(255, 255, 255, $alpha))
}

@mixin font-size($remPx, $important: false) {
    @if $important == true {
        font-size: ($remPx) * 1px !important;
        font-size: ($remPx / 10) * 1rem !important;
    }
    @else {
        font-size: ($remPx) * 1px;
        font-size: ($remPx / 10) * 1rem;
    }
}


@mixin keyframes($name) {
    @-o-keyframes #{$name} { @content };
    @-moz-keyframes #{$name} { @content };
    @-webkit-keyframes #{$name} { @content };
    @keyframes #{$name} { @content };
}


@mixin animation($value, $type:'') {
    $animation: animation;
    @if $type != '' {
        $animation:  $animation + '-' + $type;
    }
    @include vendor-prefix($animation, $value, property);
}

/// CSS transition mixin to the current selection (apply also vendor prefixes).
/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values
///
/// @param {property} [$type = all] the CSS property to apply the transition to
/// @param {time} [$duration = .5s] the transition property
/// @param {timing-function} [$effect = ease-out] the transition property
@mixin transition($type : all, $duration : 0.5s, $effect : ease-out){
    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect, property);
}

@mixin fade($duration: 1s){

    @include keyframes(fade) {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @include vendor-prefix(animation, fade 1s forwards, property);
}

@mixin repeat(){
    @include animation(infinite, iteration-count);
}

@mixin largeHeading() {
    @include font-size(20);
    font-family: $headingFont;
    font-style: normal;
}

@mixin disableSelect() {
    @include vendor-prefix(user-select, none, property);
}