.navbar-primary {

@extend .navbar;
@extend .navbar-expand-lg;
@extend .navbar-dark;
background-color: theme-color("secondary");
height: 53px;
box-shadow: $navbar-shadow;
@include media-breakpoint-up(md) {
  height: 80px;
}

.navbar-nav:not(.navbar-icon) {
  @include media-breakpoint-down(md) {
    padding: 0 30px;

    .nav-item + .nav-item {
      border-top: 1px solid rgba(127, 145, 165, 0.5);
    }
  }

  .nav-link {
    font-size: 1rem;
    font-weight: 500;
    height: 100%;
    padding-left: $nav-link-padding-x;
    padding-right: $nav-link-padding-x;
    display: flex;
    align-items: center;
    position: relative;
    text-transform: capitalize;
    @include media-breakpoint-down(md) {
      padding: 0.75rem;
      font-size: 1.125rem;
      width: fit-content;
    }

    &:focus:not(.active),
    &:hover:not(.active) {
      color: theme-color("primary");
    }

    &.active {
      font-weight: 700;

      &:after {
        content: "";
        position: absolute;
        left: $nav-link-padding-x;
        right: $nav-link-padding-x;
        bottom: 0;
        border-bottom: 4px solid theme-color("primary");
        width: calc(100% - 2.5rem);
        @include media-breakpoint-down(md) {
          width: calc(100% - 1.5rem);
          left: 0.75rem;
          right: 0.75rem;
          bottom: 10px;
        }
      }
    }
  }
}

.container {
  height: 100%;
}

}

.navbar-secondary {

&.fixed {
  position: absolute;
  z-index: 10;
  top: 80px;
  left: 0;
  right: 0;
}

&.bg-white {
  position: relative;
  top: 0;
}

.navbar-nav {
  margin-left: -$nav-secondary-link-padding-x;

  .nav-link {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    height: 100%;
    padding: $nav-secondary-link-padding-y $nav-secondary-link-padding-x;
    position: relative;

    &:after {
      display: block;
      content: attr(title);
      font-weight: bold;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
  }

  .nav-link {
    &.active,
    &:focus,
    &:hover {
      font-weight: 700;
    }
  }
}

}

.btn-login {

align-self: stretch;
display: flex;
align-items: center;
padding: 0.7825rem 2rem;
text-transform: uppercase;
font-weight: 500;
font-size: 0.75rem;

.icon-user {
  margin-right: 0.25rem;
}
@include media-breakpoint-down(md) {
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  bottom: 54px;
  right: 0;
}

}

.navbar-icon {

@extend .flex-row;
@extend .ml-md-auto;
@extend .d-flex;
padding-right: 1.25rem;
// margin-top: -4px;
@include media-breakpoint-down(md) {
  position: absolute;
  bottom: 70px;
  left: 25px;
}

.nav-link-icon {
  color: theme-color("primary");
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 0.625rem;
  padding-right: 0;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;

  &:hover {
    opacity: 0.8;
  }

  svg {
    margin-right: 5px;

    &.icon-search {
      margin-right: 10px;
    }
  }

  small {
    font-weight: 500;
    font-size: 85.75%;
    line-height: 0.8;
    align-self: center;
    @include media-breakpoint-down(md) {
      display: none;
    }
  }
  @include media-breakpoint-down(md) {
    svg {
      height: 19px;
      width: auto;
    }
  }

  svg {
    vertical-align: middle;
  }
}

}

.navbar-toggler {

border-width: 0;

}

.navbar-brand {

margin-right: 70px;
@include media-breakpoint-down(md) {
  padding-top: 0;
  margin-right: 0;

  img {
    width: 100px;
  }
}

}

.mobile-buttons-group {

display: flex;
align-items: center;

}

.navbar-search {

display: flex;
padding-right: 1.25rem;
background-color: transparent;
border: transparent;
@include media-breakpoint-up(lg) {
  display: none;
}

}

.navbar-collapse {

@include media-breakpoint-down(md) {
  background-color: theme-color("secondary");
  position: fixed;
  display: block !important;
  top: 0;
  right: 0;
  bottom: 0;
  width: 315px;
  z-index: 2000;
  height: 100vh;
  transform: translateX(340px);
  transition: transform 0.2s ease-in-out;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;

  &.show {
    transform: translateX(0px);
  }
}

}

.navbar-collapse-header {

height: 53px;
display: flex;
justify-content: flex-end;
padding: 0 1.25rem;
@include media-breakpoint-up(lg) {
  display: none;
}

}

.overlay {

background-color: $navy-50;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: none;

&.show {
  display: block;
}

}

.navbar-collapse-inner {

@include media-breakpoint-down(md) {
  min-height: 450px;
  height: 100vh;
  position: relative;
}
@include media-breakpoint-up(lg) {
  width: 100%;
  display: flex !important;
  flex-basis: auto;
  height: 100%;
  align-items: center;
}

}