////
/// @group keyframes
/// Outputs keyframes used in animations for components, etc
////

@use "../utils";

/// Output ulu CSS keyframes
/// @example scss
///  @include ulu.base-keyframes-styles();

@mixin styles {
  @include utils.file-header('base', 'keyframes');
  @keyframes UluFadeIn {
    0% {
      opacity: 0; 
    }
    100% {
      opacity: 1; 
    }
  }
  @keyframes UluFadeInUp {
    0% {
      opacity: 0; 
      transform: translateY(10px);
    }
    100%  {
      opacity: 1; 
      transform: translateY(0);
    }
  }
  @keyframes UluFadeInDown {
    0% {
      opacity: 0; 
      transform: translateY(-10px);
    }
    100%  {
      opacity: 1; 
      transform: translateY(0);
    }
  }
  @keyframes UluFadeInLeft {
    0% {
      opacity: 0; 
      transform: translateX(-10px);
    }
    100% {
      opacity: 1; 
      transform: translateX(0);
    }
  }
  @keyframes UluFadeInLeftMore {
    0% {
      opacity: 0; 
      transform: translateX(-50px);
    }
    100% {
      opacity: 1; 
      transform: translateX(0);
    }
  }
  @keyframes UluFadeInRight {
    0% {
      opacity: 0; 
      transform: translateX(10px);
    }
    100% {
      opacity: 1; 
      transform: translateX(0);
    }
  }
  @keyframes UluFadeInRightMore {
    0% {
      opacity: 0; 
      transform: translateX(50px);
    }
    100% {
      opacity: 1; 
      transform: translateX(0);
    }
  }
  @keyframes UluFadeInZoom {
    0% {
      opacity: 0; 
      transform: scale(0);
    }
    50% {
      opacity: 0; 
      transform: scale(0);
    }
    100%  {
      opacity: 1; 
      transform: scale(1);
    }
  }
  @keyframes UluFadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes UluFadeOutLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
      }
    100% {
      opacity: 0;
      transform: translateX(-10px);
    }
  }
  @keyframes UluFadeOutRight {
    0% {
      opacity: 1;
      transform: translateX(0);
      }
    100% {
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes UluFadeOutLeftMore {
    0% {
      opacity: 1;
      transform: translateX(0);
      }
    100% {
      opacity: 0;
      transform: translateX(-50px);
    }
  }
  @keyframes UluFadeOutRightMore {
    0% {
      opacity: 1;
      transform: translateX(0);
      }
    100% {
      opacity: 0;
      transform: translateX(50px);
    }
  }
  @keyframes UluFadeDownOut {
    0% {
      opacity: 1; 
      transform: translateY(-10px);
    }
    100%  {
      opacity: 0; 
      transform: translateY(0);
    }
  }
  @keyframes UluSpin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes UluPulse {
    50% {
      opacity: 0.5;
    }
  }
  @keyframes UluScaleIn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}