.btn:focus {
    box-shadow: 0 0 0 0.1rem var(--navbar-btn-hover-outline-color);
}

.navbar {
  background-color: var(--navbar-bg-color);

  .navbar-nav {
    .nav-item {
      &.search {
        width: 100%;
      }
    }
  }

  .side-nav-toggle {
    cursor: pointer;
    margin-left: 0.8125rem;
    font-size: 1.2rem;

    i {
      color: var(--navbar-fa-icon-color);
      opacity: 0.8;
    }

    &:hover {
      i {
        opacity: 1;
      }
    }
  }

  .nav-item:not(.search) {
      display: unset;
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
  }
}

  // On Really small screens, hide the server settings wheel and show it in nav
  // TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
  .xs-only {
    display: none;
  }

  .not-xs-only {
    display: inherit;
  }

  @media only screen and (max-width:300px) {
    .xs-only {
      display: inherit;
    }

    .not-xs-only {
      display: none;
    }
  }

  .nav-item.dropdown {
    position: unset;
  }

.navbar-brand {
  font-family: var(--brand-font-family);
  font-weight: bold;
  margin: 0 2rem;
  display: flex;
  align-items: center;

  &:hover {
    text-decoration: none;
  }

  .logo-icon {
    align-items: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
  }

  .logo {
    vertical-align: text-top;
    max-height: 1.75rem;
    line-height: 2.0625rem;
    margin-left: 0.3125rem;
  }

  .phone-hidden {
    vertical-align: middle;
  }
}

  .focus-visible:focus {
    visibility: visible;
    color: var(--nav-header-text-color);
  }

  .ng-autocomplete {
    margin-bottom: 0px;
  }

  .primary-text {
    color: var(--nav-header-text-color);
    border: none;
  }

  .search-result {
    width: 1.5rem;
    margin-top: 0.3125rem;
  }

  .scroll-to-top:hover {
    animation: MoveUpDown 1s linear infinite;
  }

  .text-light {
    color: var(--search-result-text-lite-color) !important;
  }

/* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) {
  :host ::ng-deep {
    .navbar-nav {
      .nav-item.search {
        .ng-autocomplete {
          input {
            font-size: 1rem !important;
          }
        }
      }
    }
  }
  .navbar-nav {
    width: 0;
  }

  .navbar-brand {
    margin: 0 1rem 0 1rem;

    .logo-icon {
        margin: unset;
    }
  }
}