import styled , { css } from 'styled-components' ; import { animated } from 'react-spring' ; interface ContainerProps { type ? : 'sucess' | 'error' | 'info' ; hasDescription : boolean ; } const toastTypeVariations = { info : css `
    background: #ebf8ff;
    color: #3172b7;
  ` , sucess : css `
    background: #e6fffa;
    color: #2e656a;
  ` , error : css `
    background: #fddede;
    color: #c53030;
  ` , } ; export const Container = styled ( animated . div ) < ContainerProps > `
  width: 360px;
  position: relative;
  padding: 16px 30px 16px 16px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0.2);
  display: flex;
  & + div {
    margin-top: 8px;
  }
  ${ ( props ) => toastTypeVariations [ props . type || 'info' ] }
  > svg {
    margin: 4px 12px 0 0;
  }
  div {
    flex: 1;
    p {
      margin-top: 4px;
      font-size: 14px;
      opacity: 0.8;
      line-height: 20px;
    }
  }
  button {
    position: absolute;
    right: 16px;
    top: 19px;
    opacity: 0.6;
    border: 0;
    background: transparent;
    color: inherit;
  }
  ${ ( props ) => ! props . hasDescription && css `
      align-items: center;
      svg {
        margin-top: 0;
      }
    ` }
` ;