text: import PropTypes from 'prop-types';
  import { css } from '@emotion/core';
  import styled from '@emotion/styled';
  import { hideVisually } from 'polished';
  import { color, fontWeight, fontSize, themeGet, space } from 'styled-system';
  import omitProps from '../omitProps';
  
  const Link = styled('a', omitProps(['hidden', 'underline']))`
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    color: ${themeGet('colors.ui.link')};
  
    &:hover {
      color: ${themeGet('colors.ui.linkHover')};
    }
  
    &:focus {
      outline: ${themeGet('borders.2')} ${themeGet('colors.brand.secondary')};
    }
  
    /* including these utils after default styles allows us to override them */
    ${color};
    ${fontWeight};
    ${fontSize};
    ${space};
  
    ${(props) =>
      props.underline &&
      css`
        &,
        &:hover {
          text-decoration: underline;
          color: inherit;
        }
      `};
    ${(props) =>
      props.hidden &&
      css`
        ${hideVisually()};
      `};
  `;
  
  Link.propTypes = {
    ...color.propTypes,
    ...fontWeight.propTypes,
    ...fontSize.propTypes,
    ...space.propTypes,
    hidden: PropTypes.bool,
    underline: PropTypes.bool,
  };
  
  Link.defaultProps = {
    underline: false,
    hidden: false,
  };
  
  Link.displayName = 'Link';
  
  export default Link;
  