.navBar {
  flex: 0 0 2.75rem;
  padding: 0 5rem;
  background-color: var(--base-brand-blue);
  color: var(--base-white);
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .links {
    display: flex;

    &:not(:has(svg)) {
      gap: 0.5rem;
    }

    > a {
      text-decoration: none;
      color: inherit;

      &:hover,
      &:active {
        color: inherit !important;
      }
    }

    > a,
    > span {
      display: flex;
      height: 3rem;
      padding: 0.5rem 0.75rem;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
    }

    > :first-child:not(:global(.active)) {
      padding-left: 0;
    }

    > :global(.active) {
      border-bottom: 4px solid var(--accent-orange);
      padding-bottom: calc(0.5rem - 4px);
      font-weight: bold;
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    span {
      text-transform: lowercase;
    }

    a {
      text-decoration: underline;
      color: inherit;

      &:hover,
      &:active {
        color: inherit !important;
      }
    }
  }

  svg {
    width: 1.5rem;
    color: var(--base-white);
    fill: var(--base-white);
  }
}

.navBarMenu {
  position: absolute;
  top: 0.75rem;
  left: 0;
  z-index: 1;

  display: flex;
  width: 13rem;
  flex-direction: column;
  align-items: flex-start;
  background: var(--base-white);
  overflow: hidden;

  border-radius: 0.5rem;
  border: 1px solid var(--gray-300);
  box-shadow:
    0 4px 8px -2px rgba(16, 24, 40, 0.1),
    0 2px 4px -2px rgba(16, 24, 40, 0.06);

  > a {
    display: flex;
    padding: 0.75rem;
    gap: 1.25rem;
    align-self: stretch;

    font-weight: 500;
    line-height: 1.5rem;
    color: var(--gray-700);
    text-decoration: none;

    > svg {
      width: 1.5rem;
      fill: var(--gray-700);
    }

    &:hover {
      background: var(--gray-50);

      > svg {
        fill: var(--link-default);
      }
    }
  }
}

.navBarMenuContainer {
  position: relative;
  height: 3rem;
  padding: 0.75rem;
  cursor: pointer;

  /* undo default button styling */
  background: none;
  color: inherit;
  border: none;
  font: inherit;
}
