import { _ as _extends } from './extends-2f4448b8.js';
import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { N as NavFooter } from './NavFooter-4bcffccb.js';
import { S as SocialNavFooter } from './index.esm-9508070a.js';
import { S as SocialSearchComponent } from './SocialSearchComponent-98bfc990.js';
import 'react-bootstrap/Form';
import 'react-bootstrap/FormControl';
import 'react-bootstrap/Button';
import Segment from './Segment.js';
import { c as checkSisterSite } from './checkSisterSite-a7218fda.js';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { M as MdEmail } from './index.esm-9b042655.js';
import { b as IoMdLogIn } from './index.esm-eb1e8e80.js';
import { m as main_43, c as main_44 } from './main-dde1592e.js';
import './_commonjsHelpers-0c4b6f40.js';
import './core.get-iterator-method-95db387d.js';
import './web.dom.iterable-3fffc027.js';
import './react-social-icons-9be47857.js';
import 'prop-types';
import './iconBase-ccc56b97.js';
import './SocialIcons.js';
import './asyncToGenerator-1ebeb135.js';
import './_library-528f1934.js';
import './_set-species-7d3317b7.js';
import './_iter-detect-2f89237f.js';

var HamMagazine = function HamMagazine(props) {
  /*
  Example Nav with acceptable props
  <MagazineNav
     showLogin
     logo={props.settings.logo}
     dataObject={props.cache.mainNavCache}
     website={website}
     subNav={props.cache.subNavCache}
      />
  */

  // Setting 'socialIconVariant' as 'light' as default to make the social icons and search icon black
  var logo = props.logo,
      mobileLogo = props.mobileLogo,
      dataObject = props.dataObject,
      subNav = props.subNav,
      _props$website = props.website,
      website = _props$website === undefined ? {} : _props$website,
      _props$showLogin = props.showLogin,
      showLogin = _props$showLogin === undefined ? false : _props$showLogin,
      _props$socialFooterNa = props.socialFooterNav,
      socialFooterNav = _props$socialFooterNa === undefined ? false : _props$socialFooterNa,
      _props$socialIconVari = props.socialIconVariant,
      socialIconVariant = _props$socialIconVari === undefined ? 'light' : _props$socialIconVari,
      invertedLogo = props.invertedLogo;
      props.settings;
      var _props$searchIconUrl = props.searchIconUrl,
      searchIconUrl = _props$searchIconUrl === undefined ? null : _props$searchIconUrl;

  var navRef = useRef(null);
  var topNavRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isSticky = _useState2[0],
      setIsSticky = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      screenWidth = _useState4[0],
      setScreenWidth = _useState4[1];

  var _useState5 = useState(null),
      _useState6 = _slicedToArray(_useState5, 2),
      userAgent = _useState6[0],
      setUserAgent = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      isOpen = _useState8[0],
      setIsOpen = _useState8[1];

  var _useState9 = useState(0),
      _useState10 = _slicedToArray(_useState9, 2),
      resolution = _useState10[0],
      setResolution = _useState10[1];

  var _useState11 = useState(true),
      _useState12 = _slicedToArray(_useState11, 2),
      isDesktop = _useState12[0],
      setIsDesktop = _useState12[1];

  var _useState13 = useState(0),
      _useState14 = _slicedToArray(_useState13, 2),
      topOffset = _useState14[0],
      setTopOffset = _useState14[1];

  useEffect(function () {
    // Check for desktop or mobile device
    if (window && window.innerWidth < 568) setIsDesktop(false);

    // Hiding light-nav with logo on mobile devices
    if (window && window.innerWidth < 1200 && topNavRef) topNavRef.current.style.display = 'none';

    // Initial User agent setup on refresh or on load
    setUserAgent(navigator.userAgent.toString());

    // Initial screenwidth setup on refresh or on load
    setScreenWidth(parseInt(window.innerWidth));

    setTimeout(function () {
      var segmentLinks = navRef.current.querySelectorAll('a[data-need-segment-support="true"]');
      for (var i = 0; i < segmentLinks.length; i++) {
        var link = segmentLinks[i];
        var href = link.getAttribute('href');
        var newRef = Segment.getURL(href, { needSegmentSupport: true });
        link.setAttribute('href', newRef);
      }
    }, 1000);
  }, []);

  // Check for browser resize
  useEffect(function () {
    if (resolution === 0) {
      setResolution(window.innerWidth);
    }
    var handleResize = function handleResize() {
      if (resolution === 0) {
        setResolution(window.innerWidth);
      } else {
        if (window.innerWidth < 568 && resolution >= 568 && isDesktop) {
          console.log('Detected Mobile Resolution');
          window.location.reload();
          // Updating the condition to reload the page on resize in desktop view
        } else if (window.innerWidth >= 568 && !isDesktop) {
          console.log('Detected Tablet/Desktop Resolution');
          window.location.reload();
        }
      }
    };
    window.addEventListener('resize', handleResize);
  }, [resolution]);

  // Check for change in useragent with change in screen resolution
  useEffect(function () {
    var handleResize = function handleResize() {
      if (userAgent && userAgent !== navigator.userAgent.toString()) {
        console.log('Browser change detected, refreshing');
        window.location.reload();
      }
    };
    window.addEventListener('resize', handleResize);
  }, [userAgent]);

  //  Handling navigation and logo position on scroll
  useEffect(function () {
    var navOffsetTop = document.getElementById('navbar-ham') && document.getElementById('navbar-ham').offsetTop;
    var adSection = document.querySelector('.AD728x90');
    var navLinks = document.getElementById('nav-links');
    var mastNav = document.querySelector('.nav-brands');
    var stickNavOnScroll = function stickNavOnScroll() {
      // Taking into consideration the height of the top navbar while setting the navigation fixed

      if (window && topNavRef && topNavRef.current && navRef && navRef.current && window.pageYOffset !== 0 && window.pageYOffset + topNavRef.current.clientHeight + navRef.current.clientHeight > navOffsetTop) {
        if (navRef.current && navRef.current.style) {
          navRef.current.style.position = 'fixed';
          if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
        }
        setIsSticky(true);
        navLinks.style.margin = 'auto';
      } else {
        if (navRef.current && navRef.current.style) {
          topNavRef.current.style.paddingBottom = '0';
          navRef.current.style.position = 'relative';
          if (adSection) adSection.style.marginTop = '';
          if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
        }
        setIsSticky(false);
        navLinks.style.margin = '0px auto 0px 0px';
      }
    };
    if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);

    if (window.pageYOffset > navOffsetTop) {
      if (navRef.current && navRef.current.style) {
        navRef.current.style.position = 'fixed';
        if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
      }
    }

    if (props.initiallyCollapsed && !main_43) {
      navRef.current.style.position = 'fixed';
      setIsSticky(true);
      navLinks.style.margin = 'auto';
      if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
    }
    window.addEventListener('scroll', stickNavOnScroll);
    return function () {
      window.removeEventListener('scroll', stickNavOnScroll);
    };
  }, []);

  var handleLogin = function handleLogin(e) {
    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
      GCN.onecount.login();
    } else {
      console.error('GCN not defined');
    }
  };

  var handleLogout = function handleLogout(e) {
    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
      GCN.onecount.logout();
    } else {
      console.error('GCN not defined');
    }
  };

  return React__default.createElement(
    'header',
    { className: !main_43 && isOpen ? 'nav-open' : 'nav-close', style: { zIndex: '999999' } },
    React__default.createElement(
      Navbar,
      { expand: 'md', ref: topNavRef },
      React__default.createElement(
        Container,
        { style: { position: 'relative' } },
        React__default.createElement(
          Nav,
          { id: 'navbar-top', className: 'justify-content-center navbar-top', style: { margin: '0 auto' } },
          showLogin && React__default.createElement(
            Nav.Item,
            { id: 'nav-mobile-register', className: 'hide-on-login', style: { display: 'none' } },
            React__default.createElement(
              'a',
              { href: '/register' },
              React__default.createElement(
                'div',
                { className: 'px-2 py-2' },
                React__default.createElement(MdEmail, null),
                ' Register'
              )
            )
          ),
          React__default.createElement(
            Nav.Item,
            { className: 'nav-mobile-logo' },
            React__default.createElement(
              'a',
              { href: '/' },
              mobileLogo && screenWidth < 776 ? React__default.createElement('img', { src: mobileLogo, alt: website.title ? website.title : website.name ? website.name : 'Website Logo' }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '55px' }, alt: website.title ? website.title : website.name ? website.name : 'Website Logo' })
            )
          ),
          showLogin && React__default.createElement(
            Nav.Item,
            { id: 'nav-mobile-login', className: 'hide-on-login', style: { display: 'none' } },
            React__default.createElement(
              'div',
              { className: 'px-2 py-2 ', onClick: function onClick(e) {
                  return handleLogin();
                } },
              React__default.createElement(IoMdLogIn, null),
              ' Login'
            )
          ),
          showLogin && React__default.createElement(
            React__default.Fragment,
            null,
            React__default.createElement(
              Nav.Item,
              { id: 'nav-mobile-logout', className: 'hide-on-logout', style: { display: 'none' } },
              React__default.createElement(
                'div',
                { className: 'pl-2 pr-3 py-2 text-right', onClick: function onClick(e) {
                    return handleLogout();
                  } },
                React__default.createElement(IoMdLogIn, null),
                ' Logout'
              )
            )
          )
        ),
        React__default.createElement(
          Nav,
          { style: { position: 'absolute', right: '15px' }, className: 'justify-content-end rightHeader' },
          showLogin && React__default.createElement(
            React__default.Fragment,
            null,
            React__default.createElement(
              Nav.Item,
              { className: 'hide-on-login', style: { display: 'none' } },
              React__default.createElement(
                'a',
                { href: '/register' },
                React__default.createElement(
                  'div',
                  { className: 'px-2 py-2 mr-2', id: 'nav-register' },
                  React__default.createElement(MdEmail, null),
                  ' Register'
                )
              )
            ),
            React__default.createElement(
              Nav.Item,
              { className: 'hide-on-login', style: { display: 'none' } },
              React__default.createElement(
                'div',
                { className: 'px-2 py-2', id: 'nav-login', onClick: function onClick(e) {
                    return handleLogin();
                  } },
                React__default.createElement(IoMdLogIn, null),
                ' Login'
              )
            )
          ),
          showLogin && React__default.createElement(
            React__default.Fragment,
            null,
            React__default.createElement(
              Nav.Item,
              { className: 'hide-on-logout', style: { display: 'none' } },
              React__default.createElement(
                'div',
                { className: 'px-2 py-2', id: 'nav-logout', onClick: function onClick(e) {
                    return handleLogout();
                  } },
                React__default.createElement(IoMdLogIn, null),
                ' Logout'
              )
            )
          )
        )
      )
    ),
    React__default.createElement(
      Navbar,
      { id: 'navbar-ham', variant: 'dark', expand: 'xl', bg: 'primary', ref: navRef, style: { width: '100%', display: 'flex', top: topOffset } },
      React__default.createElement(
        Container,
        { className: 'mobile-nav' },
        React__default.createElement(
          'div',
          { className: 'nav-toggle', style: { display: 'flex' } },
          React__default.createElement(Navbar.Toggle, {
            'aria-controls': 'basic-navbar-nav',
            onClick: function onClick() {
              // Set overflow fix for iPhones safari browsers
              if (main_44) {
                var mainNav = document.querySelector('#navbar-ham');
                if (mainNav && mainNav.style) mainNav.style.overflow = 'auto';
              }
              var searchBar = document.getElementById('search-bar-mobile');
              var searchBtn = document.getElementsByClassName('search-btn-mobile');
              if (searchBar && searchBar.classList) {
                searchBar.classList.remove('show');
              }
              if (searchBtn && searchBtn[0].classList) {
                searchBtn[0].classList.remove('active-search');
              }
              setIsOpen(!isOpen);
            }
          }),
          React__default.createElement(
            'div',
            { className: 'site-logo-wrapper is-mobile', style: { margin: 'auto' } },
            React__default.createElement(
              'a',
              { href: '/' },
              React__default.createElement('img', { src: invertedLogo || logo, style: { padding: '0px ', objectFit: 'contain', maxHeight: '45px' } })
            )
          ),
          React__default.createElement(
            'div',
            { className: 'is-mobile' },
            React__default.createElement(SocialSearchComponent, { type: 'mobile', socialIconVariant: socialIconVariant, website: website, navID: 'navbar-ham', searchIconUrl: searchIconUrl })
          )
        ),
        React__default.createElement(
          'div',
          { className: 'hamburger-menu-list', style: { width: '100%', maxHeight: '85vh' } },
          subNav && React__default.createElement(
            Navbar.Collapse,
            { id: 'basic-navbar-sub' },
            React__default.createElement(
              Nav,
              { className: 'mr-auto' },
              subNav && subNav.map(function (row, index) {
                if (row.subQuery && row.subQuery.length > 0) {
                  return row.name ? React__default.createElement(
                    'div',
                    { key: 'navWrap' + index },
                    React__default.createElement(
                      NavDropdown,
                      { title: row.name, id: 'basic-nav-dropdown', renderMenuOnMount: true },
                      row.url && React__default.createElement(
                        'a',
                        {
                          className: 'dropdownlist-expand-btn',
                          href: row.url,
                          style: {
                            position: 'absolute',
                            top: '0px',
                            right: '0px',
                            cursor: 'pointer',
                            color: socialIconVariant === 'dark' ? '#000' : '#ffffff',
                            padding: '5px 10px'
                          } },
                        'View More'
                      ),
                      row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
                        if (ddRow.type === 'divider') {
                          return React__default.createElement(NavDropdown.Divider, { key: 'subNav' + subIndex });
                        } else {
                          if (ddRow.url && ddRow.name) {
                            return ddRow.url && ddRow.name ? React__default.createElement(
                              'a',
                              _extends({
                                key: 'subNav' + subIndex
                              }, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                href: ddRow.url,
                                target: ddRow.blank ? '_blank' : '_self'
                              }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                className: 'dropdown-item' }),
                              ddRow.name
                            ) : null;
                          } else return null;
                        }
                      })
                    ),
                    React__default.createElement(
                      'noscript',
                      null,
                      row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
                        if (ddRow.type === 'divider') {
                          return React__default.createElement(NavDropdown.Divider, { key: 'subNav2' + subIndex });
                        } else {
                          if (ddRow.url && ddRow.name) {
                            return ddRow.url && ddRow.name ? React__default.createElement(
                              'a',
                              _extends({
                                key: 'subNav2' + subIndex
                              }, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                href: ddRow.url,
                                target: ddRow.blank ? '_blank' : '_self'
                              }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                className: 'dropdown-item' }),
                              ddRow.name
                            ) : null;
                          } else return null;
                        }
                      })
                    )
                  ) : null;
                } else {
                  return row.url && row.name ? React__default.createElement(
                    'a',
                    _extends({
                      key: 'navlink' + index
                    }, row.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                      href: row.url,
                      target: row.blank ? '_blank' : '_self'
                    }, checkSisterSite(row.url) ? {} : { rel: 'noopener noreferrer' }, {
                      className: 'nav-link' }),
                    row.name
                  ) : null;
                }
              })
            )
          ),
          React__default.createElement(
            Navbar.Collapse,
            { id: 'basic-navbar-nav' },
            isSticky && invertedLogo && React__default.createElement(
              Nav.Item,
              { className: 'nav-mobile-logo' },
              React__default.createElement(
                'a',
                { href: '/' },
                React__default.createElement('img', { src: invertedLogo, className: 'mobile-logo', style: { height: '38px' }, alt: website.title ? website.title : website.name ? website.name : 'Website Logo' })
              )
            ),
            React__default.createElement(
              Nav,
              { id: 'nav-links', style: { marginRight: 'auto' } },
              dataObject && dataObject.map(function (row, index) {
                if (row.subQuery && row.subQuery.length > 0) {
                  return row.name ? React__default.createElement(
                    'div',
                    { key: 'navLink3' + index },
                    React__default.createElement(
                      NavDropdown,
                      { title: row.name, id: 'basic-nav-dropdown', renderMenuOnMount: true },
                      row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
                        if (ddRow.type === 'divider') {
                          return React__default.createElement(NavDropdown.Divider, { key: 'navLink4' + subIndex });
                        } else {
                          if (!!ddRow.subQuery && ddRow.subQuery.length > 0) {
                            return React__default.createElement(
                              'div',
                              { key: 'navLink4' + subIndex },
                              React__default.createElement(
                                'a',
                                _extends({}, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                  href: ddRow.url || '#',
                                  target: ddRow.blank ? '_blank' : '_self'
                                }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                  className: 'dropdown-item nav-link' }),
                                ddRow.name
                              ),
                              ddRow.subQuery.map(function (ddRow2, subIndex2) {
                                return React__default.createElement(
                                  'a',
                                  _extends({
                                    key: 'navLink5' + subIndex2
                                  }, ddRow2.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                    href: ddRow2.url,
                                    target: ddRow2.blank ? '_blank' : '_self'
                                  }, checkSisterSite(ddRow2.url) ? {} : { rel: 'noopener noreferrer' }, {
                                    className: 'dropdown-item nav-link third-level',
                                    style: { fontSize: '10px !important' } }),
                                  ddRow2.name
                                );
                              })
                            );
                          } else {
                            return ddRow.url && ddRow.name ? React__default.createElement(
                              'a',
                              _extends({
                                key: 'navLink4' + subIndex
                              }, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                href: ddRow.url,
                                target: ddRow.blank ? '_blank' : '_self'
                              }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                className: 'dropdown-item nav-link' }),
                              ddRow.name
                            ) : null;
                          }
                        }
                      })
                    ),
                    React__default.createElement(
                      'noscript',
                      null,
                      row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
                        if (ddRow.type === 'divider') {
                          return React__default.createElement(NavDropdown.Divider, { key: 'navLink5' + subIndex });
                        } else {
                          if (!!ddRow.subQuery && ddRow.subQuery.length > 0) {
                            return React__default.createElement(
                              'div',
                              { key: 'navLink4' + subIndex },
                              React__default.createElement(
                                'a',
                                _extends({}, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                  href: ddRow.url || '#',
                                  target: ddRow.blank ? '_blank' : '_self'
                                }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                  className: 'dropdown-item nav-link' }),
                                ddRow.name
                              ),
                              ddRow.subQuery.map(function (ddRow2, subIndex2) {
                                return React__default.createElement(
                                  'a',
                                  _extends({
                                    key: 'navLink5' + subIndex2
                                  }, ddRow2.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                    href: ddRow2.url,
                                    target: ddRow2.blank ? '_blank' : '_self'
                                  }, checkSisterSite(ddRow2.url) ? {} : { rel: 'noopener noreferrer' }, {
                                    className: 'dropdown-item nav-link third-level',
                                    style: { fontSize: '10px !important' } }),
                                  ddRow2.name
                                );
                              })
                            );
                          } else {
                            if (ddRow.url && ddRow.name) {
                              return ddRow.url && ddRow.name ? React__default.createElement(
                                'a',
                                _extends({
                                  key: 'navLink5' + subIndex
                                }, ddRow.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                                  href: ddRow.url,
                                  target: ddRow.blank ? '_blank' : '_self'
                                }, checkSisterSite(ddRow.url) ? {} : { rel: 'noopener noreferrer' }, {
                                  className: 'dropdown-item' }),
                                ddRow.name
                              ) : null;
                            } else return null;
                          }
                        }
                      })
                    )
                  ) : null;
                } else {
                  return row.url && row.name ? React__default.createElement(
                    'a',
                    _extends({
                      key: index
                    }, row.needSegmentSupport ? { 'data-need-segment-support': 'true' } : {}, {
                      href: row.url,
                      target: row.blank ? '_blank' : '_self'
                    }, checkSisterSite(row.url) ? {} : { rel: 'noopener noreferrer' }, {
                      className: 'nav-link' }),
                    row.name
                  ) : null;
                }
              })
            ),
            React__default.createElement(
              'div',
              { className: 'is-desktop' },
              React__default.createElement(SocialSearchComponent, { type: 'desktop', socialIconVariant: socialIconVariant, website: website, navID: 'navbar-ham', searchIconUrl: searchIconUrl })
            )
          ),
          website && React__default.createElement(
            Navbar.Collapse,
            { id: 'basic-navbar-sub' },
            React__default.createElement(
              Nav,
              { className: 'mr-auto' },
              socialFooterNav ? React__default.createElement(SocialNavFooter, { website: website, showLogo: true }) : React__default.createElement(NavFooter, { website: website, showLogo: true })
            )
          )
        )
      )
    ),
    React__default.createElement(
      'noscript',
      null,
      React__default.createElement(
        'style',
        { jsx: 'true' },
        '\n          .navbar .collapse {\n            display: block;\n          }\n        '
      )
    ),
    main_43 && !main_44 && React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n          #navbar-ham {\n            overflow: hidden;\n            overflow-y: scroll;\n            margin-bottom: 5rem;\n          }\n        '
    ),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        .third-level {\n          padding-left: 1.5rem !important;\n          padding-top: 0.1rem;\n          padding-bottom: 0.1rem;\n        }\n\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        .nav-item svg {\n          margin-bottom: 2px;\n        }\n        #nav-login,\n        #nav-logout,\n        #nav-register {\n          padding: 0.5rem;\n          cursor: pointer;\n        }\n        #nav-mobile-login,\n        #nav-mobile-logout,\n        #nav-mobile-register {\n          display: none;\n        }\n        #nav-mobile-logout,\n        #nav-mobile-login {\n          position: absolute;\n          right: 1rem;\n        }\n        #nav-mobile-register {\n          position: absolute;\n          left: 1rem;\n        }\n\n        @media screen and (max-width: 767px) {\n          .logo {\n            width: 100%;\n            padding-left: 10px;\n            padding-right: 10px;\n          }\n        }\n        @media screen and (max-width: 1199px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n          .nav-open {\n            position: relative;\n          }\n\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n\n          .android-nav {\n            max-height: 80vh;\n          }\n\n          .ios-nav {\n            max-height: none;\n          }\n\n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          // .dropdown-menu {\n          //   max-height: 315px;\n          //   overflow: auto;\n          // }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-xl .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 10px;\n            border-bottom: 0.5px solid white;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n            padding-top: 10px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n            white-space: inherit !important;\n            margin-bottom: 5px;\n            padding: 0.5rem;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          // .navbar .mobile-nav .dropdown-menu.show {\n          //   max-height: 100px;\n          // }\n        }\n        @media screen and (min-width: 1200px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          #navbar-ham {\n            overflow: visible !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n\n          .navbar.bg-primary {\n            z-index: 3000;\n          }\n        }\n        @media screen and (max-width: 1199px) {\n          #nav-mobile-login,\n          #nav-mobile-logout,\n          #nav-mobile-register {\n            display: block;\n          }\n          .navbar-top {\n            flex-direction: row;\n            justify-content: space-around !important;\n            align-items: center;\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n            width: 100%;\n          }\n        }\n        @media screen and (max-width: 1199px) {\n          .is-desktop {\n            display: none;\n          }\n        }\n        @media screen and (min-width: 1200px) {\n          .is-mobile {\n            display: none;\n          }\n        }\n        @media screen and (max-width: 1199px) {\n          .navbar .mobile-nav .dropdown-menu.show {\n            overflow: hidden;\n            overflow-y: scroll;\n          }\n          .dropdown-menu > .nav-item {\n            padding: 0.5rem;\n          }\n        }\n      '
    )
  );
};

export { HamMagazine, HamMagazine as default };
