$navbar-min-height: 50px;
$navbar-background-color: $grey-lighter !default;

$navbar-dark-background-color: $black !default;

$navbar-dark-item-color: $white !default;

$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;

$navbar-burger-color: $black !default;
$navbar-burger-bg-color: $accent !default;
$navbar-burger-dimensions: 3.25rem !default;

$navbar-item-color: $darker-grey !default;
$navbar-item-font-weight: $weight-normal !default;
$navbar-item-border-width: 2px !default;
$navbar-item-border-color: transparent !default;
$navbar-item-padding: calc(1.125em - #{$navbar-item-border-width}) 1em !default;

$navbar-item-icon-gap: 0.5em;

$navbar-item-active-font-weight: $weight-bold !default;
$navbar-item-active-border-color: $accent !default;
$navbar-item-active-bg-color: $white !default;
$navbar-item-active-color: $accent !default;

$navbar-dark-item-active-bg-color: $black !default;
$navbar-dark-item-active-color: $accent !default;

$navbar-dropdown-background-color: $navbar-background-color !default;
$navbar-dropdown-dark-background-color: $navbar-dark-background-color !default;
$navbar-dropdown-z: 20 !default;

@mixin navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  z-index: $navbar-fixed-z;
}

.navbar {
  background-color: $navbar-background-color;
  position: relative;
  z-index: $navbar-z;
  min-height: $navbar-min-height;

  & > .container {
    align-items: stretch;
    display: flex;
    width: 100%;
    padding: 0;
  }

  &.is-dark {
    background-color: $navbar-dark-background-color;

    .navbar-menu {
      background-color: $navbar-dark-background-color;
    }

    .navbar-item:not(div),
    .navbar-item > a {
      color: $navbar-dark-item-color;

      &.is-active,
      &:hover {
        color: $navbar-dark-item-active-color;
        background-color: $navbar-dark-item-active-bg-color;
      }
    }

    .navbar-dropdown {
      background-color: $navbar-dropdown-dark-background-color;
    }
  }

  &.has-shadow {
    box-shadow: 0 0 5px 1px rgba(0,0,0,.15);
  }

  &.is-fixed-bottom,
  &.is-fixed-top {
    @include navbar-fixed;
  }
  &.is-fixed-bottom {
    bottom: 0
  }
}

.navbar-brand {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
}

.navbar-brand {
  a.navbar-item {
    font-size: 1.3rem;
    font-weight: bold;
    padding-bottom: calc(1.125em / 2);
    padding-top: calc(1.125em / 2);
    border: none;

    &:hover {
      background-color: transparent;
    }
  }
}

.navbar-burger {
  background-color: $navbar-burger-bg-color;
  color: $navbar-burger-color;
  @include hamburger($navbar-burger-dimensions);
}

.navbar-menu {
  display: none;
}

%nav-link {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  color: $navbar-item-color;
  background-color: transparent;
  font-weight: $navbar-item-font-weight;
  padding: $navbar-item-padding;
  line-height: 1;

  &.is-active,
  &:hover {
    border-color: $navbar-item-active-border-color;
    background-color: $navbar-item-active-bg-color;
    color: $navbar-item-active-color;
  }

  &.is-active {
    font-weight: $navbar-item-active-font-weight;
  }

  .icon {
    width: 1em;
    height: 1em;

    &:not(:last-child) {
      margin-right: $navbar-item-icon-gap;
    }

    &:last-child:not(:first-child) {
      margin-left: $navbar-item-icon-gap;
    }
  }

  @include desktop {
    border-bottom: $navbar-item-border-width solid transparent;
  }
}

.navbar-item:not(div) {
  @extend %nav-link;
}

.navbar-item > a {
  @extend %nav-link;
}

.navbar-dropdown {
  font-size: 0.875rem;

  .navbar-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@include touch {
  .navbar > .container {
    display: block;
  }

  .navbar-brand {
    .navbar-item {
      display: flex;
      align-items: center;
      order: 1;
    }
  }

  .navbar-menu {
    box-shadow: 0 8px 8px rgba($black, 0.1);

    &.is-active {
      display: block;
    }
  }
}

@include desktop {
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end {
    align-items: stretch;
    display: flex;
  }

  .navbar-burger {
    display: none;
  }

  .navbar-item,
  .navbar-item > a {
    position: relative;
    align-items: center;
    display: flex;
  }

  .navbar-item:not(a):hover .navbar-dropdown {
    display: block;
  }

  .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;
  }

  .navbar > .container,
  .container > .navbar {
    .navbar-brand {
      margin-left: -0.75rem;
    }

    .navbar-menu {
      margin-right: -0.75rem;
    }
  }

  .navbar-dropdown {
    background-color: $navbar-dropdown-background-color;
    box-shadow: 0 8px 8px rgba($black, 0.1);
    display: none;
    font-size: 0.875rem;
    left: 0;
    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: $navbar-dropdown-z;

    .navbar-item {
      padding: .5rem 1rem;
      white-space: nowrap;
      border: none;
    }
  }
}