@if $navbarStyle == "navbar" {
  .site-navbar {
    $self: &;

    &__container {
      max-width: $marko-web-document-container-max-width;
      @include media-breakpoint-up(xl, $grid-breakpoints) {
        max-width: $marko-web-document-container-max-width;
      }
    }

    &__brand {
      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
        // reduce padding on small logo
        margin-right: $theme-site-navbar-brand-margin-x * 0.5;
        margin-left: $theme-site-navbar-brand-margin-x * 0.5;
      }
      &:first-child {
        margin-left: $marko-web-page-wrapper-padding;
      }
    }

    &__logo {
      filter: none;
      width: auto;
    }

    &__newsletter-toggler,
    &__idx-newsletter-toggler {
      @include theme-toggle-button();
      padding: 0;
      margin-top: auto;
      margin-bottom: auto;

      @media (min-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
        margin-left: auto;
      }

      & > .marko-web-icon {
        @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
      }
    }

    &__icon-wrapper {
      display: flex;
      flex-wrap: nowrap;
      margin-left: auto;
      padding-left: 1rem;
      #{ $self }__toggler {
        margin-left: 1rem;
      }
    }

    &__search {
      &--sponsored {
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-self: center;
        @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
          margin-top: 0;
          margin-bottom: 0;
        }
        img {
          margin-left: 12px;
          max-height: 24px;
        }
      }
    }

    &--secondary {
      #{ $self } {
        &__container {
          @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
            justify-content: space-between;
          }
        }
      }
    }

    &__items {
      text-transform: none;

      &--secondary {
        @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
          display: none;
        }
        margin-top: auto;
        margin-bottom: auto;

        // set letter spacing per design
        letter-spacing: .5px;

        #{ $self } {
          &__link {
            padding-top: 0;

            @media (max-width: map-get($theme-site-header-breakpoints, small-text-secondary)) {
              padding-right: 8px;
              padding-left: 8px;
            }
          }
        }
      }
    }
  }
}