export const containerStyles = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  paddingTop: 'base.spacing.x6',
  paddingBottom: 'base.spacing.x4',
  paddingX: 'base.spacing.x4',
  height: '100%',
};

export const contentTextStyles = {
  color: 'base.color.text.body.secondary',
  fontFamily: 'base.font.family.heading.secondary',
  textAlign: 'center',
  marginTop: 'base.spacing.x4',
};

export const actionButtonContainerStyles = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  alignItems: 'center',
  gap: 'base.spacing.x2',
  height: '100%',
  width: '100%',
};

export const actionButtonStyles = {
  width: '100%',
  height: 'base.spacing.x16',
  marginBottom: 'base.spacing.x16',
};

export const logoContainerStyles = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  paddingTop: 'base.spacing.x6',
};

export const statusStyles = {
  width: 'base.icon.size.600',
  fill: 'base.color.status.fatal.bright',
};