@navbar-background: @global-inverse-color;
@navbar-background-image: none;
@navbar-box-shadow: @global-default-shadow;
@navbar-z-index: @global-z-index - 10;

@navbar-nav-item-font-size: @global-small-font-size;
@navbar-nav-item-font-weight: 600;
@navbar-nav-item-height: @global-header-height;
@navbar-nav-item-color: @global-color;
@navbar-nav-item-hover-color: @global-secondary-background;
@navbar-nav-item-hover-text-decoration: none;
@navbar-nav-item-active-color: @global-primary-background;
@navbar-nav-item-active-text-decoration: none;
@navbar-nav-item-onclick-color: @navbar-nav-item-active-color;
@navbar-nav-item-onclick-text-decoration: @navbar-nav-item-active-text-decoration;

@navbar-item-color: @navbar-nav-item-color;

@navbar-toggle-color: @navbar-nav-item-color;
@navbar-toggle-hover-color: @global-link-hover-color;

@navbar-dropdown-width: 260px;
@navbar-dropdown-margin: 5px;
@navbar-dropdown-padding: 0;
@navbar-dropdown-background: @global-inverse-color;
@navbar-dropdown-border: @global-border;
@navbar-dropdown-border-width: @global-border-width;
@navbar-dropdown-border-radius: @global-border-radius;
@navbar-dropdown-box-shadow: @global-default-shadow;

@navbar-dropdown-nav-margin-vertical: 5px;
@navbar-dropdown-nav-margin-horizontal: 0;
@navbar-dropdown-nav-font-size: @global-small-font-size;
@navbar-dropdown-nav-font-weight: 400;

@navbar-dropdown-nav-item-color: @global-color;
@navbar-dropdown-nav-item-padding-horizontal: 30px;
@navbar-dropdown-nav-item-padding-vertical: 5px;
@navbar-dropdown-nav-item-hover-background: @light-blue;
@navbar-dropdown-nav-item-hover-color: @global-color;
@navbar-dropdown-nav-item-active-background: @light-blue;
@navbar-dropdown-nav-item-active-font-weight: 600;
@navbar-dropdown-nav-item-active-color: @global-color;

@navbar-dropdown-nav-header-color: @info-color;

@navbar-dropdown-nav-sublist-item-color: @global-meta-color;
@navbar-dropdown-nav-sublist-item-hover-color: @global-link-hover-color;
@navbar-dropdown-nav-sublist-item-active-color: @global-link-hover-color;

/* Navbar */

.hook-navbar-container() {
  background-image: @navbar-background-image;
  background-size: cover;
  box-shadow: @navbar-box-shadow;
  position: relative;
  z-index: @navbar-z-index;

  & .uk-logo {
    & > img {
      height: @navbar-nav-item-height - 20px;
    }
  }
}


/* Navbar items */
.hook-navbar-nav-item() {
  font-weight: @navbar-nav-item-font-weight;
}

.hook-navbar-nav-item-hover() {
  text-decoration: @navbar-nav-item-hover-text-decoration;
}

.hook-navbar-nav-item-onclick() {
  text-decoration: @navbar-nav-item-onclick-text-decoration;
}

.hook-navbar-nav-item-active() {
  text-decoration: @navbar-nav-item-active-text-decoration;
}


/* Navbar dropdown */
.hook-navbar-dropdown() {
  box-shadow: @navbar-dropdown-box-shadow;
  border: @navbar-dropdown-border-width solid @navbar-dropdown-border;
  border-radius: @navbar-dropdown-border-radius;
}

.hook-navbar-dropdown-nav() {
  font-size: @navbar-dropdown-nav-font-size;
  font-weight: @navbar-dropdown-nav-font-weight;
  margin: @navbar-dropdown-nav-margin-vertical @navbar-dropdown-nav-margin-horizontal;
}

.hook-navbar-dropdown-nav-item() {
  padding: @navbar-dropdown-nav-item-padding-vertical @navbar-dropdown-nav-item-padding-horizontal;
}

.hook-navbar-dropdown-nav-item-hover() {
  background-color: @navbar-dropdown-nav-item-hover-background;
}

.hook-navbar-dropdown-nav-item-active() {
  background-color: @navbar-dropdown-nav-item-active-background;
  font-weight: @navbar-dropdown-nav-item-active-font-weight;
}

.hook-navbar-dropdown-nav-header() {
  font-weight: 600;
}

@inverse-navbar-background: @primary-color;
@inverse-navbar-background-image: @global-primary-gradient;
@inverse-navbar-nav-item-color: @global-muted-background;
@inverse-navbar-nav-item-hover-color: @global-inverse-color;
@inverse-navbar-nav-item-onclick-color: @global-inverse-color;
@inverse-navbar-nav-item-active-color: @global-inverse-color;
@inverse-navbar-nav-item-active-text-decoration: underline;

@inverse-navbar-toggle-color: @global-inverse-color;

.hook-inverse() {
  .uk-navbar-container:not(.uk-navbar-transparent) {
    background-image: @inverse-navbar-background-image;
  }
}

.hook-inverse-navbar-nav-item-active {
  text-decoration: @inverse-navbar-nav-item-active-text-decoration;
}