import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   display: contents;

   @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;
      }
   }

   @keyframes heightIn {
      0% {
         height: 0;
         overflow: hidden;
      }
      100% {
         overflow: hidden;
      }
   }

   @keyframes heightOut {
      0% {
         overflow: hidden;
      }
      100% {
         height: 0;
         overflow: hidden;
      }
   }

   @keyframes scaleIn {
      0% {
         transform: scale(0);
      }
      100% {
         transform: scale(1);
      }
   }

   @keyframes scaleOut {
      0% {
         transform: scale(1);
      }
      100% {
         transform: scale(0);
      }
   }

   position: relative;
   ${(props) =>
      props.visible
         ? `animation: ${props.animationIn.map((i, index) => `${props.durationIn[index]}ms ${i}In`).join(',')}; `
         : `animation: ${props.animationOut.map((i, index) => `${props.durationOut[index]}ms ${i}Out`).join(',')};`}
   animation-fill-mode: forwards;
`;
