$navbar-color: $grey-dark !default
$navbar-background: $white !default
$navbar-dropdown-background: $white !default

$navbar-height: 3.25rem !default

.navbar
  background-color: $navbar-background
  min-height: $navbar-height
  position: relative

.navbar-brand
  align-items: stretch
  height: $navbar-height
  display: flex

.navbar-burger
  +hamburger($navbar-height)
  margin-left: auto

.navbar-item,
.navbar-link
  align-items: center
  color: $navbar-color
  display: flex
  line-height: 1.5
  padding: 0.5rem 1rem
  position: relative

a.navbar-item,
.navbar-link
  &:hover
    background-color: $background

.navbar-item
  // border-right: 1px solid $border
  flex-grow: 0
  flex-shrink: 0
  img
    max-height: 1.75rem
  &.has-dropdown
    align-items: stretch
    padding: 0
    &::after
      +arrow($input-arrow)
      margin-top: -0.375em
      right: 1.125em
      top: 50%

.navbar-content
  flex-grow: 1
  flex-shrink: 1

.navbar-link
  padding-right: 2.5em

.navbar-dropdown
  background-color: $navbar-dropdown-background
  border-bottom-left-radius: $radius-large
  border-bottom-right-radius: $radius-large
  // border-top: 1px solid $border
  box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
  font-size: 0.875rem
  left: 0
  min-width: 100%
  padding-bottom: 0.25rem
  padding-top: 0.25rem
  position: absolute
  top: 100%
  z-index: 20
  .navbar-item
    padding: 0.375rem 1rem

.navbar-divider
  background-color: $border
  border: none
  display: block
  height: 1px
  margin: 0.25rem 0

+mobile
  .navbar-menu
    background-color: $background
    padding: 0.5rem 0

+tablet
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end
    align-items: stretch
    display: flex
  .navbar-burger
    display: none
  .navbar-menu
    flex-grow: 1
    flex-shrink: 0
  .navbar-start
    justify-content: flex-start
    margin-right: auto
  .navbar-end
    justify-content: flex-end
    margin-left: auto