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

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 = {
  sm: {
    container: {
      fontSize: 'sm',
      lineHeight: '16px',
    },
  },
  md: {
    container: {
      fontSize: 'md',
      lineHeight: '20px',
    },
  },
  lg: {
    container: {
      fontSize: 'md',
      lineHeight: '24px',
    },
    icon: {
      size: 'sm',
    },
  },
  xl: {
    container: {
      fontSize: 'lg',
      lineHeight: '28px',
    },
    icon: {
      size: 'sm',
    },
  },
}

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