import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { getTransitionOpacity } from '../../../../styled-components';
import { StyledNavItem } from './StyledNavItem';
var color = selectors.color,
  fontSize = selectors.fontSize;
export var StyledNavItemText = styled.div.withConfig({
  displayName: "StyledNavItemText",
  componentId: "sc-1euxxs0-0"
})(["display:inline-block;color:", ";font-size:", ";opacity:", ";transition:opacity 150ms linear;padding:0.25rem 0.5rem;", ":hover &{color:", ";}", ""], color('neutral', '100'), fontSize('m'), function (_ref) {
  var $transitionStatus = _ref.$transitionStatus;
  return getTransitionOpacity($transitionStatus);
}, StyledNavItem, color('neutral', 'white'), function (_ref2) {
  var isOpen = _ref2.isOpen;
  return !isOpen && css(["display:none;"]);
});