import styled from 'styled-components' ; import defaultTheme from 'design/theme' ; import { color } from 'design/system' ; const fromTheme = ( { $nested = false , theme = defaultTheme } ) => { const css = { position : 'relative' , fontSize : '12px' , fontWeight : theme . regular , fontFamily : theme . font , paddingLeft : theme . space [ 9 ] + 'px' , paddingRight : theme . space [ 5 ] + 'px' , background : theme . colors . primary . light , color : theme . colors . text . secondary , minHeight : '56px' , '&:active, &.active' : { borderLeftColor : $nested ? 'none' : theme . colors . accent , background : theme . colors . primary . lighter , color : theme . colors . primary . contrastText , fontWeight : theme . bold , '.marker' : { background : theme . colors . secondary . light , } , } , '&:hover' : { background : theme . colors . primary . lighter , } , '&:focus, &:hover' : { color : theme . colors . primary . contrastText , } , } ; if ( $nested ) { css . fontSize = '11px' ; css . background = 'none' ; css . fontWeight = theme . regular ; css . paddingLeft = '96px' ; css . minHeight = '40px' ; } return css ; } ; const SideNavItem = styled . div `
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-left: 4px solid transparent;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  width: 100%;
  line-height: 24px;
  ${ fromTheme }
  ${ color }
` ; export default SideNavItem ;