import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   @keyframes fadeIn {
      0% {
         opacity: 0;
      }
      100% {
         opacity: 1;
      }
   }

   @keyframes fadeOut {
      0% {
         opacity: 1;
      }
      100% {
         opacity: 0;
      }
   }

   @keyframes slideLeftIn {
      0% {
         transform: translateX(-100%);
      }
      100% {
         transform: translateX(0%);
      }
   }

   @keyframes slideLeftOut {
      0% {
         transform: translateX(0%);
      }
      100% {
         transform: translateX(-100%);
      }
   }

   @keyframes slideRightIn {
      0% {
         transform: translateX(100%);
      }
      100% {
         transform: translateX(0%);
      }
   }

   @keyframes slideRightOut {
      0% {
         transform: translateX(0%);
      }
      100% {
         transform: translateX(100%);
      }
   }
   
   @keyframes fadeSlideLeftIn {
      0% {
         transform: translateX(-100%);
         opacity: 0;
      }
      100% {
         transform: translateX(0%);
         opacity: 1;
      }
   }

   @keyframes fadeSlideLeftOut {
      0% {
         transform: translateX(0%);
         opacity: 1;
      }
      100% {
         transform: translateX(-100%);
         opacity: 0;
      }
   }

   @keyframes fadeSlideRightIn {
      0% {
         transform: translateX(100%);
         opacity: 0;
      }
      100% {
         transform: translateX(0%);
         opacity: 1;
      }
   }

   @keyframes fadeSlideRightOut {
      0% {
         transform: translateX(0%);
         opacity: 1;
      }
      100% {
         transform: translateX(100%);
         opacity: 0;
      }
   }

   position: relative;
   ${(props) =>
      props.visible
         ? `animation: ${props.durationIn}ms ${props.animationIn}In;`
         : `animation: ${props.durationOut}ms ${props.animationOut}Out;`}
   animation-fill-mode: forwards;
`;
