const baseStyle = {
  container: {
    dislplay: 'inline',
  },
  icon: {
    size: 'xs'
  },
  text: {
    fontSize: 'inherit',
  },
}

const defaultProps = {
  variant: 'dark',
}

const parts = ['container', 'icon', 'text']

const variants = {
  dark: {
    container: {
      color: `seaBlue.main`,
    },
  },
  light: {
    container: {
      color: `digiGreen.main`,
    },
  },
  white: {
    container: {
      color: `white`,
    },
  },
  plain: {
    container: {
      hoverTextDecoration: 'none',
    },
  },
}

const sizes = {
  xs: {
    container: {
      fontSize: 'xs',
      lineHeight: '18px',
    },
    icon: {
      size: 'xxs'
    },
  },
  sm: {
    container: {
      fontSize: 'sm',
      lineHeight: '22px',
    },
  },
  md: {
    container: {
      fontSize: 'md',
      lineHeight: '26px',
    },
  },
  lg: {
    container: {
      fontSize: 'lg',
      lineHeight: '32px',
    },
  }
}

export default {
  baseStyle,
  defaultProps,
  parts,
  sizes,
  variants,
}
