@import 'tailwindcss';

@import './keyframes.css';
@import './utilities/base/duration.css';
@import './utilities/base/fill.css';
@import './utilities/base/delay.css';
@import './utilities/base/iteration.css';
@import './utilities/base/ease.css';
@import './utilities/custom-props/blur.css';
@import './utilities/custom-props/scale.css';
@import './utilities/custom-props/opacity.css';
@import './utilities/custom-props/slide-move.css';
@import './utilities/custom-props/rotate.css';


:root {
  --anim-slide-move: 3rem;
  --anim-blur: blur(0px);

  --anim-scale-x: 1;
  --anim-scale-y: 1;
  --anim-opacity: 1;
  --anim-rotate: 0deg;

  --internal-anim-slide-transform: 0 0;
  --internal-anim-params: 800ms ease both;
}


@utility animate-slide-in-l {
  animation: slide-in var(--internal-anim-params);
  --internal-anim-slide-transform: calc(var(--anim-slide-move) * -1) 0;
}

@utility animate-slide-in-r {
  animation: slide-in var(--internal-anim-params);
  --internal-anim-slide-transform: var(--anim-slide-move) 0;
}

@utility animate-slide-in-t {
  animation: slide-in var(--internal-anim-params);
  --internal-anim-slide-transform: 0 calc(var(--anim-slide-move) * -1);
}

@utility animate-slide-in-b {
  animation: slide-in var(--internal-anim-params);
  --internal-anim-slide-transform: 0 var(--anim-slide-move);
}

@utility animate-slide-out-l {
  animation: slide-out var(--internal-anim-params);
  --internal-anim-slide-transform: calc(var(--anim-slide-move) * -1) 0;
}

@utility animate-slide-out-r {
  animation: slide-out var(--internal-anim-params);
  --internal-anim-slide-transform: var(--anim-slide-move) 0;
}

@utility animate-slide-out-t {
  animation: slide-out var(--internal-anim-params);
  --internal-anim-slide-transform: 0 calc(var(--anim-slide-move) * -1);
}

@utility animate-slide-out-b {
  animation: slide-out var(--internal-anim-params);
  --internal-anim-slide-transform: 0 var(--anim-slide-move);
}

@utility animate-fade-in {
  animation: fade-in var(--internal-anim-params);
  --anim-opacity: 0;
}

@utility animate-fade-out {
  animation: fade-out var(--internal-anim-params);
  --anim-opacity: 0;
}