import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject;

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
export var ListItem = (_ref) => {
  var {
    isHidden,
    text,
    isPrimary,
    url
  } = _ref;
  return /*#__PURE__*/React.createElement(Link, {
    href: url,
    prefetch: false
  }, /*#__PURE__*/React.createElement(Wrapper, {
    isPrimary: isPrimary,
    isVisible: isHidden
  }, text));
};
var Wrapper = styled.li.attrs({
  className: 'mb-2 pb-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  transition: all 0.3s;\n  display: block;\n  font-weight: 500;\n  cursor: pointer;\n\n  @media (min-width: ", ") {\n    overflow: hidden;\n    white-space: nowrap;\n    transition: all 0.7s;\n    max-height: 1.8em;\n  }\n  opacity: 0;\n  &:hover {\n    color: ", ";\n  }\n  ", "\n\n  opacity: ", ";\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, props => props.isPrimary && "\n      opacity: 1 !important;\n    ", props => props.isVisible && !props.isPrimary ? 1 : 0);
//# sourceMappingURL=index.js.map