// -------------------------------------------------- //
// Transitions
// -------------------------------------------------- //
@mixin transition($ms) {
    -webkit-transition: all #{$ms}ms cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition: all #{$ms}ms cubic-bezier(0.86, 0, 0.07, 1);
    -ms-transition: all #{$ms}ms cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition: all #{$ms}ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: all #{$ms}ms cubic-bezier(0.86, 0, 0.07, 1);
}

@mixin transition-back($property, $time) {
    -webkit-transition: $property $time cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition: $property $time cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: $property $time cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: $property $time cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: $property $time cubic-bezier(0.175, 0.885, 0.32, 1.275);

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@mixin transition-ease-out($property, $time) {
    -webkit-transition: $property $time cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: $property $time cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: $property $time cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: $property $time cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */

    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */
}

@mixin transition-ease-in($property, $time) {
    -webkit-transition: $property $time cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition: $property $time cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: $property $time cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: $property $time cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeOutQuart */

    -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeOutQuart */
}