'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _NavigationItemList = require('./NavigationItemList');

var _NavigationItemList2 = _interopRequireDefault(_NavigationItemList);

var _NavigationItemListStack = require('./NavigationItemListStack');

var _NavigationItemListStack2 = _interopRequireDefault(_NavigationItemListStack);

var _NavigationBar = require('./NavigationBar');

var _NavigationBar2 = _interopRequireDefault(_NavigationBar);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var NavigationItem = _styledComponents2.default.div.withConfig({ displayName: 'NavigationItem' }).withConfig({
  displayName: 'NavigationItem'
})(['border:0;padding:', ' 0 ', ' 0;line-height:1;opacity:1;transition:all 0.2s ease;position:relative;cursor:pointer;color:inherit;font-size:1em;font-weight:200;&::before{content:\'\';background:', ';width:104%;height:', ';display:block;position:absolute;bottom:0;top:auto;left:50%;transform:translateX(-50%);transition:height 0.2s ease,opacity 0.2s ease;}&:hover::before{opacity:0.5;height:5px;}', ' &,', ' &{&::before{background:', ';}&:hover::before{opacity:0.5;height:5px;}}', ' &{color:', ';}', ' &{padding:', ' 0 0 0;margin-bottom:10px;font-size:0.8em;&::before{height:', ';top:calc(100% + 10px);bottom:auto;}&:hover::before{opacity:0.5;height:5px;}}', ' > ', ':not(:first-child):not(:only-child) &{padding-top:', ';}'], (0, _themeGet2.default)('spacing.large'), (0, _themeGet2.default)('spacing.large'), (0, _themeGet2.default)('colors.primary.dark'), function (props) {
  return props.active ? '5px' : 0;
}, _NavigationBar2.default.Dark, _NavigationBar2.default.Sub, (0, _themeGet2.default)('colors.primary.default'), _NavigationBar2.default.Sub, function (props) {
  return props.active ? (0, _themeGet2.default)('colors.primary.default')(props) : 'inherit';
}, _NavigationItemList2.default.Small, (0, _themeGet2.default)('spacing.large'), function (props) {
  return props.active ? '5px' : 0;
}, _NavigationItemListStack2.default, _NavigationItemList2.default, (0, _themeGet2.default)('spacing.medium'));

NavigationItem.propTypes = {
  /**
   * Adds a class name to the element.
   */
  className: _propTypes2.default.string,

  /**
   * Adds an id to the element.
   */
  id: _propTypes2.default.string
};

NavigationItem.defaultProps = {
  className: null,
  id: null
};

exports.default = NavigationItem;