'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');
var utils = require('./utils.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const Wrapper = styled__default['default'].div `
  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  padding: ${(props) => props.componentName === 'notification'
    ? index.getSpacing('s04')
    : index.getSpacing('s04', 's06')};
  border-radius: ${(props) => props.componentName === 'notification' && props.theme.radius.roundedC};
  ${(props) => utils.mapTypeToCss(props.variant)};
  position: relative;
`;
const Actions = styled__default['default'].div `
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-top: ${index.getSpacing('s04')};
  margin-right: ${({ compact, showClose }) => compact && showClose && index.getSpacing('s08')};
  width: 100%;

  & > button + button {
    margin-left: ${index.getSpacing('s02')};
  }
`;
const Container = styled__default['default'].div `
  display: flex;
  flex-flow: ${(props) => (props.compact ? 'row' : 'column')} nowrap;
  width: 100%;

  ${(props) => props.compact &&
    styled.css `
      ${Actions} {
        margin-top: 0;
      }
    `}
`;
const IconWrapper = styled__default['default'].div `
  align-items: center;
  display: flex;
  height: 28px;
  margin-right: ${index.getSpacing('s04')};

  svg {
    fill: ${index.getColorAlias('contentDefault')};
    height: 20px;
    width: 20px;
  }
`;
const CloseIcon = styled__default['default'].div `
  position: absolute;
  right: 16px;
  top: ${({ compact }) => (compact ? '8px' : '4px')};
`;
const Title = styled__default['default'].h4 `
  ${index.getFontSize('size20')};
  color: ${index.getColorAlias('contentDefault')};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  margin: 0;
  padding: 0;
  width: 100%;
`;
const Content = styled__default['default'].div `
  color: ${index.getColorAlias('contentDefault')};
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  min-height: 24px;
  padding-top: 4px;
  width: 100%;
`;

exports.Actions = Actions;
exports.CloseIcon = CloseIcon;
exports.Container = Container;
exports.Content = Content;
exports.IconWrapper = IconWrapper;
exports.Title = Title;
exports.Wrapper = Wrapper;
