import { styled } from 'styleh-components'

export const modalInAnimation = styled.keyframes `
  0% {
    /* start slightly off from initial (110 -> 90) */
    transform: translateY(110%) scale(1, 1);
  }
  60% {
    transform: translateY(-10%) scale(1, 1);
  }
  100% {
    /* final resting place */
    transform: translateY(0%) scale(1, 1);
  }
`

export const closeInAnimation = styled.keyframes `
  0% {
    transform: translateY(110%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0%);
  }
`

export const boxInAnimation = styled.keyframes `
  0% {
    opacity: 0;
    transform: translateY(110%) scale(0.8, 0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(10%) scale(1, 0.9);
  }
  100% {
    transform: translateY(0%) scale(1, 1);
  }
`