import styled from 'styled-components';
import { getToastPosition } from './style/position.js';
import { getEnteringAnimation, getExitingAnimation } from './style/animation.js';

const ToastWrapper = styled.div `
  ${(props) => getToastPosition(props.position, props.theme)};
  position: fixed;
  display: flex;
  pointer-events: none;
  z-index: ${({ zIndex }) => zIndex};
`;
const AnimatedToastMessage = styled.div `
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-name: ${(props) => props.entering
    ? getEnteringAnimation(props.position)
    : getExitingAnimation(props.position)};
`;

export { AnimatedToastMessage, ToastWrapper };
