// // Navbar // —————————————-

.navbar {

min-height: building-units(6.5);
position: relative;
top: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;

@include clearfix();

@media (min-width: #{$grid-float-breakpoint}px) {
  padding-left: 12px;
  padding-right: 12px;
}

}

.navbar-persistent {

@include clearfix();

@media (min-width: #{$grid-float-breakpoint}px) {
  float: right;
}

@media (max-width: #{$grid-float-breakpoint-max}px) {
  .active ~ & {
    height: 0;
    overflow: hidden;
  }
}

}

.navbar-expanded {

@include clearfix();
position: relative;

@media (min-width: #{$grid-float-breakpoint}px) {
  float: left;
  position: static;
}

}

.container-fluid, .container-fixed {

> .navbar-persistent,
> .navbar-expanded {
  margin-right: -12px;
  margin-left: -12px;
}

}

.navbar-nav {

float: left;
padding-top: 19px;
padding-bottom: 22px;

> li {
  float: left;
  margin-left: 12px;
  margin-right: 12px;

  > a {
    border-radius: 3px;
    font-size: 21px;
    @include button-variant($font-color-regular, #fff, transparent);
    padding-top: capline-bu(.75, 21px) + 1px;
    padding-bottom: baseline-bu(.75, 21px) - 1px;
  }
}

}

.navbar-nav-icons {

> li  > a {
  font-size: 26px;
  padding: 1px 5px 4px;

  > .badge {
    position: absolute;
    top: -6px;
    right: -10px;
  }
}

@media (min-width: #{$grid-float-breakpoint}px) {
  margin-right: -6px;
  margin-left: -6px;
}

}

.navbar-header-label {

position: absolute;
font-size: 21px;
text-align: center;
left: 48px;
right: 48px;
top: 25px;
color: $color-brand;

}

.navbar-portalname {

float: left;
font-size: 21px;
font-weight: bold;
text-transform: uppercase;
padding-top: 24px;
padding-left: 12px;
padding-right: 12px;
margin-right: 24px;
display: none;

@media (min-width: #{$grid-float-breakpoint}px) {
  display: block;
}

}

.navbar-toggle {

position: relative;
float: left;
margin-left: 12px;
margin-right: 12px;

@media (min-width: #{$grid-float-breakpoint}px) {
  display: none;
}

}

.navbar-default {

background-color: #fff;
border-color: $color-border-bright;
color: $font-color-regular;

.navbar-icons > li > a {
  font-size: 26px;
  padding: 1px 5px 4px;
}

.form-select-js .form-select-js-choice {
  background-color: #fff;
}

}

.navbar-btn {

float: left;
margin-top: 19px;
padding-left: building-units(1) - 1px;
padding-right: building-units(1) - 1px;
padding-top: capline-bu(.75, 21px);
padding-bottom: baseline-bu(.75, 21px) - 2px;
font-size: 21px;

> .icon {
  padding: 0;
}

}

.navbar-search-item {

position: inherit !important;

.form-icon {
  font-size: 24px;
}

> .navbar-search {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 19px;
}

}

.navbar-search-item-regular {

@media (min-width: #{$grid-float-breakpoint}px) {
  position: relative !important;

  > .navbar-search {
    left: auto;
    width: building-units(30);
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;

    &.slide { width: 0; }
    &.slide.in { width: building-units(30); }
    &.slide .icon { transition: opacity $transition-time-out ease-out; transition-delay: 0s; opacity: 0; }
    &.slide.in .icon { transition-delay: $transition-time-out; opacity: 1; }
  }
}

@media (max-width: #{$grid-float-breakpoint-max}px) {
  > .navbar-search {
    background-color: #fff;

    &.slide { width: auto; }

    .cancel {
      font-size: 24px;
    }
  }

  .form-input {
    border: 0;

    &:focus {
      border: 0;
      box-shadow: none;
    }
  }
}

}

.navbar-search-item-block {

.navbar-form {
  @include container-fixed();
  margin-left: auto;
  margin-right: auto;
}

> .navbar-search {
  background-color: #fff;
  width: 100%;

  .cancel {
    font-size: 24px;
  }
}

.form-input {
  border: 0;

  &:focus {
    border: 0;
    box-shadow: none;
  }
}

}

.navbar-left {

float: left;

}

.navbar-right {

float: right;

}