import styled from "styled-components";
import { NotificationType } from "../../../types/notification";
export const TypeIcon = styled.div ``;
export const Title = styled.div `
  font-size: ${({ theme }) => theme.new?.notification?.titleFontSize};
  font-weight: ${({ theme }) => theme.new?.notification?.titleFontWeight};
  line-height: ${({ theme }) => theme.new?.notification?.titleLineHeight};
`;
export const Description = styled.div `
  font-size: ${({ theme }) => theme.new?.notification?.descFontSize};
  font-weight: ${({ theme }) => theme.new?.notification?.descFontWeight};
  line-height: ${({ theme }) => theme.new?.notification?.descLineHeight};
`;
export const Wrapper = styled.div `
  position: relative;
  padding: 20px;
  border-radius: 16px;
  border-left: 4px solid;
  width: 340px;
  box-shadow: ${({ theme }) => theme.new?.notification?.boxShadow};
  background: ${({ theme }) => theme.new?.notification?.background};

  &.${NotificationType.info} {
    border-left-color: ${({ theme }) => theme.new?.notification?.infoColor};
  }

  &.${NotificationType.error} {
    border-left-color: ${({ theme }) => theme.new?.notification?.errorColor};
  }

  display: flex;
  align-items: stretch;

  ${TypeIcon} {
    margin-right: 14px;
  }

  ${Title} {
    margin-top: 4px;
  }
`;
export const ActionWrapper = styled.div `
  display: flex;
  column-gap: 18px;
  row-gap: 8px;
`;
export const Content = styled.div `
  display: flex;
  flex-direction: column;
  align-items: stretch;

  ${ActionWrapper} {
    margin-top: 12px;
  }
`;
export const Action = styled.div `
  color: ${({ theme }) => theme.new?.notification?.actionColor};
  font-size: ${({ theme }) => theme.new?.notification?.actionFontSize};
  font-weight: ${({ theme }) => theme.new?.notification?.actionFontWeight};
  line-height: ${({ theme }) => theme.new?.notification?.actionLineHeight};

  :hover {
    cursor: pointer;
  }
`;
export const Close = styled.span `
  position: absolute;
  top: 14px;
  right: 18px;

  :hover {
    cursor: pointer;
  }
`;
//# sourceMappingURL=notification.styled.js.map