// Triangle @mixin badge-triangle-variant($bg) {

color: color-yiq($bg);
background-color: $bg;

&:after {
  border-right-color: darken($bg, 10%);
}

} // Transition @mixin transition($transition…) {

-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;

} // Keyframe @mixin keyframes($animation-name) {

@-webkit-keyframes #{$animation-name} {
  @content;
}
@-moz-keyframes #{$animation-name} {
  @content;
}
@-ms-keyframes #{$animation-name} {
  @content;
}
@-o-keyframes #{$animation-name} {
  @content;
}
@keyframes #{$animation-name} {
  @content;
}

} // Animation @mixin animation ($delay, $duration, $animation, $fill-mode) {

-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: $fill-mode;
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: $fill-mode;
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: $fill-mode;
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: $fill-mode;

} // Timeline point @mixin background-image-spaced($width, $height, $margin-bottom, $image) {

// background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width}" height="#{$height + $margin-bottom}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/svg+xml;base64,#{$image}" /></svg>");

} // Alert close color @mixin alert-close-variant($color) {

g {
  stroke: $color;
}

}