@import "settings.animations";

@mixin tree-keyframes {
  @keyframes tree {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

@mixin tree {
  animation-name: tree;
  animation-duration: $animation-duration;
  animation-fill-mode: both;
  animation-timing-function: $animation-easing;
}

@mixin tree--slow {
  animation-duration: $animation-duration-slow;
}

@mixin tree--fast {
  animation-duration: $animation-duration-fast;
}

@mixin tree__item {
  transition-property: color, transform;
  transition-duration: $animation-duration;
  transition-timing-function: $animation-easing;
}

@mixin tree__item--slow {
  transition-duration: $animation-duration-slow;
}

@mixin tree__item--fast {
  transition-duration: $animation-duration-fast;
}