import styled from 'styled-components/macro';

import { other } from '../../../../theme';

export const animationDuration = 300;

export const StyledToast = styled.div`
  overflow: visible;
  pointer-events: auto;
  position: relative;
  transition-duration: ${animationDuration}ms;
  transition-property: height, opacity, left;
  transition-timing-function: ${other('sys/timing-function/smooth')};

  &.enter {
    opacity: 0;
  }

  &.enter-active {
    opacity: 1;
  }

  &.exit {
    left: 0;
    opacity: 1;
  }

  &.exit-active {
    left: 200px;
    opacity: 0;
  }
`;