export const topMenuItemStyles = {
  borderBottomLeftRadius: '0px',
  borderBottomRightRadius: '0px',
  marginBottom: '2px',
  position: 'relative',
};

export const bottomMenuItemStyles = {
  borderTopLeftRadius: '0px',
  borderTopRightRadius: '0px',
  backgroundColor: 'base.color.translucent.emphasis.100',
  position: 'relative',
};

export const wcWalletLogoStyles = {
  width: 'base.icon.size.400',
};

export const wcStickerLogoStyles = {
  position: 'absolute',
  top: '2px',
  left: '26px',
  width: '20px',
  padding: '2px',
  backgroundColor: 'base.color.translucent.inverse.900',
  borderRadius: 'base.borderRadius.x2',
};

export const bridgeReviewWrapperStyles = {
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  paddingX: 'base.spacing.x4',
};

export const bridgeReviewHeadingStyles = {
  paddingTop: 'base.spacing.x10',
  paddingBottom: 'base.spacing.x4',
};

export const arrowIconWrapperStyles = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  paddingY: 'base.spacing.x1',
};

export const arrowIconStyles = {
  width: 'base.icon.size.300',
  transform: 'rotate(270deg)',
};

export const gasAmountHeadingStyles = {
  marginBottom: 'base.spacing.x4',
  color: 'base.color.text.body.secondary',
};

export const bridgeButtonIconLoadingStyle = {
  width: 'base.icon.size.400',
};

export const rawImageStyle = {
  backgroundColor: 'base.color.translucent.standard.200',
  position: 'absolute',
  width: '32px',
  height: '32px',
  padding: '6px',
  left: 'base.spacing.x3',
};

export const networkIconStyles = {
  position: 'absolute',
  right: 'base.spacing.x3',
  w: 'base.icon.size.400',
  h: 'base.icon.size.400',
};