const root = theme => ({
  position: 'fixed',
  top: '50%',
  left: '50%',
  zIndex: 1001,
  transform: 'translate(-50%, -50%)',
  backgroundColor: theme.colors.white.default,
  borderRadius: 2,
  padding: '16px 24px 24px'
});

const title = {
  display: 'flex',
  justifyContent: 'space-between'
};
const content = {
  marginTop: 16,
  minHeight: 40
};
const actions = {
  display: 'flex',
  justifyContent: 'flex-end',
  marginTop: 16,
  '> *': {
    margin: '0 4px',
    '&:last-child': {
      marginRight: 0
    }
  }
};

const mask = theme => ({
  position: 'fixed',
  top: 0,
  left: 0,
  zIndex: 1000,
  width: '100%',
  height: '100%',
  backgroundColor: theme.colors.standard.transparent2
});

export const styles = theme => ({
  root: root(theme),
  title,
  content,
  actions,
  mask: mask(theme)
});