// Navbar
//
// Simple [Bootstrap navbar](https://getbootstrap.com/docs/3.3/components/#navbar). Also contains the menu toggle button component inside (only visible on < 768px viewport).
//
// Markup:
// <nav class="navbar">
//   <div class="container-fluid">
//     <div class="navbar-nav__container">
//       <ul class="navbar-nav list list--unstyled">
//         <li class="navbar-nav__item navbar-nav__item--active">
//           <a href="./">About Us</a>
//         </li>
//         <li class="navbar-nav__item">
//           <a href="./services.html">Services</a>
//         </li>
//         <li class="navbar-nav__item">
//           <a href="./know-how.html">Know-how</a>
//         </li>
//         <li class="navbar-nav__item">
//           <a href="./contacts.html">Contacts</a>
//         </li>
//       </ul>
//     </div>
//   </div>
//   <div class="menu-toggle" id="menuToggle">
//     <div class="menu-toggle__lines">
//       <div class="menu-toggle__line1"></div>
//       <div class="menu-toggle__line2"></div>
//       <div class="menu-toggle__line3"></div>
//     </div>
//   </div>
// </nav>
//
// Styleguide Components.navbar
.navbar {
  position: relative;
  height: 50px;
  z-index: z-index(navbar);

  @include breakpoint-max($desktop-breakpoint) {
    margin-bottom: 30px;
  }

  &-nav {
    text-align: center;
    height: 50px;

    &__container {
      @include breakpoint-max($tablet-breakpoint) {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: z-index(mobileNav);

        .navbar-nav {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: auto;

          &__item {

            > a {
              padding: 1.5rem;
              font-size: rem(16);
              display: block;
            }
          }
        }
      }
    }

    &__item {
      color: $primary-font-color;
      opacity: 0.3;
      transition: $transition-time opacity, $transition-time color;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;

      @include breakpoint-min($tablet-breakpoint) {
        display: inline-block;

        > a {
          display: block;
          padding: 1rem 2rem;
          font-size: rem(14);
        }
      }

      &--active,
      &:hover {
        opacity: 1;
      }

      &--active {
        color: $primary-accent-color;
      }
    }
  }
}