.navbar {
  position: relative;
  z-index: 10;

  &-primary {
    background-color: $primary;
  }
}

.navbar-brand {
  height: 36px;
  width: 175px;
  background: $logo-file-path no-repeat;
}

@include media-breakpoint-up(md) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.navbar .nav-item {
  font-size: 14px;
}

.navbar .nav-link {
  color: $white;
}

.navbar .form-control {
  background: transparent;
  width: auto;
  font-size: 12px;
  border-left: none;
  color: $white;
  border-color: transparentize($white, 0.30);


  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparentize($white, 0.5);
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: transparentize($white, 0.5);
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: transparentize($white, 0.5);
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: transparentize($white, 0.5);
  }

  &:focus {
    box-shadow: none;
  }

  @include media-breakpoint-up(xl) {
    width: calc(43ch + #{$input-padding-x * 2});
  }
}

.navbar .input-group-text {
  background: none;
  border-right: none;
  border-color: transparentize($white, 0.30);
}

.fa-search {
  color: $white;
}

.topnav-nav-link {
  position: relative;
  color: $white;

  &:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 0.2rem;
    background-color: $white;
    opacity: 0;
    transform: translateX(-50%) translateY(-0.5rem);
    transition: all 0.3s ease;
  }

  &:hover {
    color: $white;

    &:before {
      transform: translateX(-50%) translateY(-0.25rem);
      opacity: 1;
    }
  }

  &:active {

    &:before {
      transition: all 0.1s ease-out;
      transform: translateX(-50%) translateY(-0.5rem);
    }
  }
}