scinote-web/app/assets/stylesheets/navigation/top_menu.scss

// scss-lint:disable SelectorDepth unknownProperties IdSelector
// scss-lint:disable NestingDepth SelectorFormat

#sciNavigationTopMenuContainer {
  display: contents;
}

.sci--navigation--top-menu-container {
  align-items: center;
  background-color: $color-white;
  box-shadow: $flyout-shadow;
  display: flex;
  gap: .5em;
  height: 100%;
  padding: 0 2em;

  .sci--navigation--top-menu-logo {
    a {
      display: inline-block;
    }

    .logo {
      max-height: 22px;

      &.small {
        display: none;
      }
    }
  }

  .sci--navigation--top-menu-search {
    margin-left: auto;
    margin-right: 1em;
    width: 240px;
  }

  .sci--navigation--top-menu-user {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 1em;
    margin-left: .75em;

    span {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .avatar {
      border-radius: 50%;
    }
  }

  .dropdown-menu {
    top: 43px;
    border-radius: 0 0 4px 4px;
  }

  .top-menu-user-dropdown {
    top: 40px;
  }

  .dropdown-menu li a {
    line-height: 1rem;
    padding: .625rem 1rem;
  }

  @media(max-width: 1200px) {
    .sci--navigation--top-menu-logo {
      .logo {
        &.large {
          display: none;
        }

        &.small {
          display: initial;
        }
      }
    }
  }
}