//
// Navbar
//
// .c-navbar {
//   _navbar();
// }
//
// import BasisNavbar from 'node_modules/getbasis/src/js/navbar.js';
// new BasisNavbar();
//
// <ul class="c-navbar">
//   <li class="c-navbar__item" data-c="navbar__item" aria-haspopup="true">
//     <a href="#">menu</a>
//     <ul class="c-navbar__submenu" data-c="navbar__submenu" aria-hidden="true">
//       <li class="c-navbar__subitem" data-c="navbar__subitem" aria-haspopup="true">
//         <a href="#">submenu</a>
//         <ul class="c-navbar__submenu" data-c="navbar__submenu" aria-hidden="true">
//           <li class="c-navbar__subitem" data-c="navbar__subitem"><a href="#">submenu</a></li>
//         </ul>
//       </li>
//     </ul>
//   </li>
// </ul>
//

_navbar() {
  _list-unstyled();
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  &__item {
    position: relative;
    display: flex;
    flex: 1;

    > a {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;
      text-decoration: none;
    }

    > [data-c="navbar__submenu"] {
      _position(absolute, 100%, null, null, 0);
    }
  }

  &__subitem {
    position: relative;

    > a {
      display: block;
      text-decoration: none;
    }

    > [data-c="navbar__submenu"] {
      _position(absolute, 0, null, null, 100%);
    }
  }

  &__submenu {
    _list-unstyled();
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    _transition(opacity);

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
    }
  }
}