$nav-height: 3.25rem !default

// Components

.nav-toggle
  +hamburger($nav-height)
  // Responsiveness
  +tablet
    display: none

.nav-item
  align-items: center
  display: flex
  flex-grow: 0
  flex-shrink: 0
  font-size: $size-normal
  justify-content: center
  line-height: 1.5
  padding: 0.5rem 0.75rem
  a
    flex-grow: 1
    flex-shrink: 0
  img
    max-height: 1.75rem
  .tag
    &:first-child:not(:last-child)
      margin-right: 0.5rem
    &:last-child:not(:first-child)
      margin-left: 0.5rem
  // Responsiveness
  +mobile
    justify-content: flex-start

.nav-item a:not(.button),
a.nav-item:not(.button)
  color: $text-light
  &:hover
    color: $link-hover
  // Modifiers
  &.is-active
    color: $link-active
  &.is-tab
    border-bottom: 1px solid transparent
    border-top: 1px solid transparent
    padding-bottom: calc(0.75rem - 1px)
    padding-left: 1rem
    padding-right: 1rem
    padding-top: calc(0.75rem - 1px)
    &:hover
      border-bottom-color: $primary
      border-top-color: transparent
    &.is-active
      border-bottom: 3px solid $primary
      color: $primary
      padding-bottom: calc(0.75rem - 3px)
  // Responsiveness
  +desktop
    &.is-brand
      padding-left: 0

// Containers

.nav-left,
.nav-right
  +overflow-touch
  align-items: stretch
  display: flex
  flex-grow: 1
  flex-shrink: 0
  max-width: 100%
  overflow: auto
  +widescreen
    flex-basis: 0

.nav-left
  justify-content: flex-start
  white-space: nowrap

.nav-right
  justify-content: flex-end

.nav-center
  align-items: stretch
  display: flex
  flex-grow: 0
  flex-shrink: 0
  justify-content: center
  margin-left: auto
  margin-right: auto

.nav-menu
  // Responsiveness
  +mobile
    &.nav-right
      background-color: $white
      box-shadow: 0 4px 7px rgba($black, 0.1)
      left: 0
      display: none
      right: 0
      top: 100%
      position: absolute
      .nav-item
        border-top: 1px solid rgba($border, 0.5)
        padding: 0.75rem
      &.is-active
        display: block

// Main container

.nav
  align-items: stretch
  background-color: $white
  display: flex
  height: $nav-height
  position: relative
  text-align: center
  z-index: 10
  & > .container
    align-items: stretch
    display: flex
    min-height: $nav-height
    width: 100%
  // Modifiers
  &.has-shadow
    box-shadow: 0 2px 3px rgba($black, 0.1)