.navbar {
  background-color: var(--addgene-dark-blue);
  height: 4.7rem;

  .nav-link.active,
  .nav-link.show {
    color: var(--addgene-link-hover-on-dark-blue);
  }

  @media (min-width: 576px) {
    height: 6.375rem;
  }
}

.navbar-brand .logo {
  width: auto;
  height: 30px;
  margin-right: 1rem;

  @media (min-width: 576px) {
    height: 38px;
  }
}

#navbar-main-menu .list-group-flush {
  margin-top: 1rem;
  padding-left: 0;

  > .list-group-item {
    border-bottom: 1px solid var(--addgene-dark-blue-subtle-border);
    padding: 0.8rem 0;

    &:first-child {
      border-bottom: 1px solid var(--addgene-dark-blue-subtle-border);
    }
  }

  a {
    color: var(--addgene-gray-7);
    text-decoration: none;

    &:visited {
      color: var(--addgene-gray-7);
    }

    &:hover {
      text-decoration: underline;
    }
  }
}

.navbar-toggler-icon {
  background-image: url('data:image/svg+xml,<svg width="30" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23a)" stroke="%23fff" stroke-width="3" stroke-linecap="round"><path d="M1.5 1.5h27M1.5 12.5h27M1.5 23.5h27"/></g><defs><clipPath id="a"><path fill="%23fff" d="M0 0h30v25H0z"/></clipPath></defs></svg>');
}

.navbar-toggler {
  padding: 0.25rem;
  border: none;
  font-size: var(--bs-body-font-size);

  &.btn.btn-link:hover,
  &.btn.btn-link:active {
    box-shadow: none;
  }
}

.navbar-toggler:focus,
.btn-close:focus {
  color: var(--bs-primary);
  box-shadow: 0 0 0 0.1rem var(--bs-primary);
  border-radius: 2px;
}