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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import Link from 'next/link';
import styled, { css } from 'styled-components';
import { Typography } from '../../../../Common/Typography/index';

var ListElement = (_ref) => {
  var {
    url,
    label,
    isHighlighted,
    Tag = 'div',
    isExternal
  } = _ref;
  var CustomTag = "" + Tag;
  return /*#__PURE__*/React.createElement(CustomTag, null, url ? /*#__PURE__*/React.createElement(Link, {
    prefetch: false,
    href: url,
    passHref: true
  }, /*#__PURE__*/React.createElement("a", {
    target: isExternal ? '_blank' : '_self'
  }, /*#__PURE__*/React.createElement(Wrapper, {
    as: "span",
    variant: isHighlighted ? 6 : 7,
    highlight: isHighlighted
  }, label))) : /*#__PURE__*/React.createElement(Wrapper, {
    highlight: isHighlighted
  }, label));
};

var Wrapper = styled(Typography)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  cursor: pointer;\n  transition: opacity 0.15s ease, color 0.15s ease;\n  display: inline-block;\n\n  ", "\n"])), props => props.highlight ? props.theme.palette.secondary : props.theme.palette.grey, props => props.highlight ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          text-transform: uppercase;\n          opacity: 1;\n          font-size: 14px;\n          :hover {\n            opacity: 0.8;\n          }\n        "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          color: ", ";\n        }\n  }\n"])), props.theme.palette.secondary));
export { ListElement };
//# sourceMappingURL=index.js.map