import _Link from 'reakit/Link' ; import { palette , theme } from 'styled-tools' ; import { darken } from 'polished' ; import _defaultPalette from '../themes/default/palette' ; import styled , { selector } from '../styled' ; import Icon from '../Icon/styled' ; import { LinkProps } from './Link' ; const defaultPalette = _defaultPalette ( { } ) ; export const Link = styled ( _Link ) < LinkProps > `
  color: ${ palette ( 'primary' ) };
  fill: ${ palette ( 'primary' ) };
  cursor: pointer;
  text-decoration: underline;
  text-decoration-skip: ink edges;

  &:hover {
    color: ${ props => darken ( 0.5 , palette ( 'primary' , 0 , defaultPalette . primary ) ( props ) ) };
    fill: ${ props => darken ( 0.5 , palette ( 'primary' , 0 , defaultPalette . primary ) ( props ) ) };
  }

  & ${ selector ( Icon ) } {
    top: 0.15em;
  }

  & {
    ${ theme ( 'fannypack.Link.base' ) };
  }
` ; export default Link ;