import styled from 'styled-components' ; import { space , width , maxWidth , height , maxHeight } from 'design/system' ; /**
 * TopNavItem
 */ const TopNavItem = styled . button `
  align-items: center;
  background: none;
  border: none;
  color: ${ props => props . active ? props . theme . colors . light : 'rgba(255, 255, 255, .56)' };
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  height: 100%;
  margin: 0;
  outline: none;
  padding: 0 16px;
  position: relative;
  text-decoration: none;

  &:hover, &:focus {
    background:  ${ props => props . active ? props . theme . colors . primary . light : 'rgba(255, 255, 255, .06)' };
  }

  &.active{
    background:  ${ props => props . theme . colors . primary . light };
    color: ${ props => props . theme . colors . light };
  }

  &.active:after {
    background-color: ${ props => props . theme . colors . accent };
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
  }

  ${ space }
  ${ width }
  ${ maxWidth }
  ${ height }
  ${ maxHeight }
` ; TopNavItem . displayName = 'TopNavItem' ; export default TopNavItem ;