import styled from 'styled-components';

const StyledIconWrapper = styled.div`
  display: flex;
  align-items: center;

  margin: ${({ theme }) => theme.space.notification.iconMarginTop}
    ${({ theme }) => theme.space.notification.iconMarginRight} 0 0;
  padding: 0;
  line-height: ${({ theme }) => theme.lineHeights.notification.icon};
`;

const StyledInner = styled.div`
  flex: 1;
  margin: 0;
  padding: 0;
`;

const StyledTitle = styled.div`
  color: ${({ theme }) => theme.colors.notification.title};
  font-size: ${({ theme }) => theme.fontSizes.notification.title};
  font-weight: ${({ theme }) => theme.fontWeights.notification.title};
  line-height: ${({ theme }) => theme.lineHeights.notification.title};
  margin: 0;
  padding: 0;
  margin-bottom: ${({ theme }) => theme.space.notification.titleMarginBottom};
`;

const StyledContent = styled.div`
  color: ${({ theme }) => theme.colors.notification.content};
  font-size: ${({ theme }) => theme.fontSizes.notification.content};
  font-weight: ${({ theme }) => theme.fontWeights.notification.content};
  line-height: ${({ theme }) => theme.lineHeights.notification.content};
  margin: 0;
  padding: 0;
`;

const StyledNotification = styled.div`
  display: flex;
  align-items: flex-start;
  margin: 0;

  background-color: ${({ theme }) => theme.colors.notification.bg};
  border-radius: ${({ theme }) => theme.radii.notification.default};
  padding: ${({ theme }) => theme.space.notification.padding};
  box-shadow: ${({ theme }) => theme.shadows.notification.default};
`;

const StyledCloseButton = styled.div`
  padding: 0;

  margin: ${({ theme }) => theme.space.notification.iconMarginTop} 0 0 auto;
  line-height: ${({ theme }) => theme.lineHeights.notification.icon};
`;

export {
  StyledNotification as default,
  StyledTitle,
  StyledInner,
  StyledContent,
  StyledIconWrapper,
  StyledCloseButton,
};