// Page: Navbar
// -----------------------------------------------------------------------------

.navbar {
  background: var(--ak-header-color-bg);
  color: var(--ak-header-color);
  font-size: 0.875rem;
  flex-shrink: 0;

  a, .nav-link {
    color: var(--ak-header-color);
  }

  .search-block-form {
    @include media-breakpoint-down(md) {
      padding-top: $spacer;
    }

    @include media-breakpoint-up(lg) {
      margin-left: map-get($spacers, 1);
    }

    @include media-breakpoint-up(xl) {
      margin-left: $spacer;
    }
  }

  .form-search {
    border: 0;
    border-radius: 4px;
    font-size: 0.875rem;
    padding: 0.175rem 0.375rem;
  }
}

.navbar-collapse {
  @include media-breakpoint-down(md) {
    padding-bottom: $spacer;
    padding-top: $spacer;
  }
}

.navbar-toggler {
  background: var(--ak-accent-color-light);
  color: var(--ak-accent-color);
}

.navbar-nav .nav-item {
  position: relative;

  .active .nav-link {
    color: var(--ak-header-color);
  }

  .nav-link.is-active::after,
  &.active::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 2px;
    height: 2px;
    background-color: var(--ak-accent-color);
    display: none;

    @include media-breakpoint-up(lg) {
      display: block;
    }
  }
}
