import { IconButton } from '../../IconButton';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
import { getActionsDirection } from './utils';
export const Wrapper = styled.article `
  display: flex;
  align-items: flex-start;

  min-height: 56px;
  padding: ${({ theme }) => theme.spacing(4)};

  color: ${({ theme }) => theme.palette.grey[900]};

  background: ${({ theme }) => theme.palette.background.default};
`;
export const Inner = styled.div `
  flex-grow: 1;

  overflow-wrap: anywhere;
`;
export const Footer = styled.footer `
  display: flex;
  justify-content: ${({ actionsDirection }) => getActionsDirection(actionsDirection)};

  margin-top: ${({ theme }) => theme.spacing(2)};
`;
export const IconWrapper = styled.div `
  margin-right: ${({ theme }) => theme.spacing(2)};
  padding-top: ${({ theme }) => theme.spacing(1)};
`;
export const Content = styled(Typography) `
  margin-top: ${({ theme }) => theme.spacing(2)};
`;
export const Header = styled.header `
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 32px;
`;
export const CloseButton = styled(IconButton) `
  align-self: center;

  width: 24px;
  height: 24px;
  padding: 0;
`;
export const Title = styled(Typography) `
  flex: 1;

  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
`;
