// Animations

@mixin animation($animation){
    -webkit-animation: $animation;
       -moz-animation: $animation;
            animation: $animation;
}

@mixin animation-duration($animation-duration){
    -webkit-animation-duration: $animation-duration;
       -moz-animation-duration: $animation-duration;
            animation-duration: $animation-duration;
}

@mixin animation-name($animation-name){
    -webkit-animation-name: $animation-name;
       -moz-animation-name: $animation-name;
            animation-name: $animation-name;
}

@mixin animation-delay($animation-delay){
    -webkit-animation-delay: $animation-delay;
       -moz-animation-delay: $animation-delay;
            animation-delay: $animation-delay;
}

@mixin animation-timing-function($animation-timing-function){
    -webkit-animation-timing-function: $animation-timing-function;
       -moz-animation-timing-function: $animation-timing-function;
            animation-timing-function: $animation-timing-function;
}

@mixin animation-fill-mode($animation-fill-mode){
    -webkit-animation-fill-mode: $animation-fill-mode;
       -moz-animation-fill-mode: $animation-fill-mode;
            animation-fill-mode: $animation-fill-mode;
}

@mixin animation-direction($animation-direction){
    -webkit-animation-direction: $animation-direction;
       -moz-animation-direction: $animation-direction;
            animation-direction: $animation-direction;
}

@mixin animation-iteration-count($animation-iteration-count){
    -webkit-animation-iteration-count: $animation-iteration-count;
       -moz-animation-iteration-count: $animation-iteration-count;
            animation-iteration-count: $animation-iteration-count;
}

// Clearfix
@mixin clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

@mixin clearfix-before {
    &:before {
        content: "";
        display: table;
        clear: both;
    }
}

// Transitions
@mixin transition($transition){
    -webkit-transition: $transition;
            transition: $transition;
}

@mixin transition-property($transition-property){
    -webkit-transition-property: $transition-property;
            transition-property: $transition-property;
}

@mixin transition-duration($transition-duration){
    -webkit-transition-duration: $transition-duration;
            transition-duration: $transition-duration;
}

@mixin transition-delay($transition-delay){
    -webkit-transition-delay: $transition-delay;
            transition-delay: $transition-delay;
}

@mixin transition-timing-function($transition-timing-function){
    -webkit-transition-timing-function: $transition-timing-function;
            transition-timing-function: $transition-timing-function;
}

// Transformations

@mixin transform($transform){
    -webkit-transform: $transform;
        -ms-transform: $transform;
            transform: $transform;
}

@mixin transform-origin($transform-origin){
    -webkit-transform-origin: $transform-origin;
        -ms-transform-origin: $transform-origin;
            transform-origin: $transform-origin;
}

@mixin rotate($degrees){
    @include transform(unquote("rotate(#{$degrees})"));
}

@mixin scale($ratio){
    @include transform(unquote("scale(#{$ratio})"));
}

@mixin translate($x, $y){
    @include transform(unquote("translate(#{$x}, #{$y})"));
}

@mixin translate3d($x, $y, $z){
    @include transform(unquote("translate3d(#{$x}, #{$y}, #{$z})"));
}

@mixin skew($x, $y){
    @include backface-visibility(unquote("hidden")); // See https://github.com/twitter/bootstrap/issues/5319
    @include transform(unquote("skew(#{$x}, #{$y})"));
    -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
}


@mixin backface-visibility($visibility){
    -webkit-backface-visibility: $visibility;
            backface-visibility: $visibility;
}

@mixin perspective($perspective){
    -webkit-perspective: $perspective;
            perspective: $perspective;
}


// Box sizing
@mixin box-sizing($boxmodel){
    -webkit-box-sizing: $boxmodel;
       -moz-box-sizing: $boxmodel;
            box-sizing: $boxmodel;
}

// User select
// For selecting text on the page
@mixin user-select($select){
    -webkit-user-select: $select;
       -moz-user-select: $select;
        -ms-user-select: $select;
            user-select: $select;
}


// Optional hyphenation
@mixin hyphens($mode: auto){
    word-wrap: break-word;

    -webkit-hyphens: $mode;
       -moz-hyphens: $mode;
        -ms-hyphens: $mode;
            hyphens: $mode;
}


@mixin topbar-triangle($color: #cccccc){
    // Generated with http://apps.eky.hk/css-triangle-generator/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    margin-top: -4px;
    border-color: transparent transparent transparent $color;
}

@mixin writing-mode($mode){
    -webkit-writing-mode: $mode;
       -moz-writing-mode: $mode;
        -ms-writing-mode: $mode;
            writing-mode: $mode;
}

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






// https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
@function blend-normal ($foreground, $background) {
  $opacity: opacity($foreground);
  $background-opacity: opacity($background);

  // calculate opacity
  $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
  $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
  $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
  @return rgb($bm-red, $bm-green, $bm-blue);
}

@function blend-multiply ($foreground, $background) {
  $bm-red: red($background) * red($foreground) / 255;
  $bm-green: green($background) * green($foreground) / 255;
  $bm-blue: blue($background) * blue($foreground) / 255;

  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}



// https://css-tricks.com/snippets/sass/str-replace-function/
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}