jsx import { CSSObject , jsx } from '@emotion/core' ; import Color from 'color' ; import { COLOR } from '../../Identity' ; import { defaultTransition } from '../../Identity/motions' ; import { QueryKeys , media } from '../../mediaQueries' ; import { TextProps , textStyle } from '../../Text' ; import type { Theme } from '../Theme' ; type MenuSubLinkProps < T = HTMLDivElement > = TextProps < T > ; export const menuSubLinkStyle = ( theme , props ) => ( { ... textStyle ( theme , props ) , '&:hover' : { color : Color ( theme . general . color ) . mix ( Color ( COLOR . BLACK ) , 0.16 ) . toString ( ) , } , color : theme . general . color , cursor : 'pointer' , fontWeight : 600 , textDecoration : 'none' , transition : defaultTransition , [ media [ QueryKeys . DESKTOP ] ] : { '&:first-child' : { marginLeft : 0 , } , '&:last-child' : { marginRight : 0 , } , fontSize : '11px' , margin : '0 26px 0 10px' , textTransform : 'uppercase' , } , [ media [ QueryKeys . TABLET_DOWN ] ] : { border : 'none' , fontSize : '32px !important' , fontWeight : '300 !important' , maxWidth : '480px' , padding : '8px 24px' , textTransform : 'none !important' , } , } ) ; export const MenuSubLink = ( props ) => ( < div css = { theme => menuSubLinkStyle ( theme , props ) } { ... props } />);