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

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