// Improve look of top bar menu.
.top-navbar
  // Darker primary color for the navbar.
  background-color: var(--primary-600)
  // For responsive navbar, set min-height when it becomes narrow on smaller viewports.
  min-height: 58px

:host ::ng-deep .stork-menubar.p-menubar
  // Inherit background color after .top-navbar which is a layer below the menu.
  background-color: inherit
  // Remove the border.
  border-width: 0
  // Remove unnecessary spacing.
  padding: 0

  // Apply the below changes only if the hamburger menu is not used.
  &:not(.p-menubar-mobile-active) .p-menubar-root-list
    // Don't wrap menu items when shrinking the viewport.
    flex-wrap: nowrap

    & > .p-menuitem
      // Custom style for not highlighted menu items.
      &:not(.p-highlight)
        & > .p-menuitem-content .p-menuitem-link .p-menuitem-text
          // Make text more visible on primary background of the navbar.
          color: var(--primary-color-text)

        &:not(.p-disabled).p-focus > .p-menuitem-content
          // In the newest PrimeNG version, the menu item is grayed out after clicking
          // it. This is a workaround to restore the original color.
          color: inherit
          background: inherit

      // Custom style for highlighted menu items.
      &.p-highlight
        & > .p-menuitem-content .p-menuitem-link .p-menuitem-text
          // Highlighted menu has light background color, so use contrasting font color.
          color: var(--text-color)
        & > .p-menuitem-content
          // Makes highlighted menu item more visible in light mode.
          background-color: var(--highlight-bg)

  .p-menubar-button
    // Use white color for the hamburger icon for better contrast on the blue
    // background.
    color: var(--primary-color-text) !important

    &:hover
      // On hover the background is white, so use black text.
      color: var(--text-color) !important

  .p-splitbutton
    span.p-button-label
      // Don't wrap button label when viewport shrinks.
      white-space: nowrap

    .p-splitbutton-defaultbutton
      // For long username this button may become very wide and cause overflow.
      // Limit max width.
      max-width: 10rem

@media screen and (max-width: 1270px)
  // Responsive Logout split button.
  :host ::ng-deep .stork-menubar.p-menubar .p-splitbutton
    span.p-button-label
      // Button label is very wide, so make it disappear on smaller viewports.
      // Logout icon remains visible.
      display: none
    .p-splitbutton-defaultbutton
      // Minimize horizontal padding on smaller viewports.
      padding-left: 0.5rem
      padding-right: 0.5rem

@keyframes p-progress-spinner-color
  0%
    stroke: #fff
  100%
    stroke: #fff

// set nice look of stork version tooltip
:host ::ng-deep .p-tooltip.stork-version-tooltip
  // fix position and look of stork version tooltip
  left: 44px !important
  // make it wider
  max-width: 600px

  .p-tooltip-arrow
    // hide arrow
    display: none

// logo styling
.logo
  &:hover
    text-decoration: none

  span
    font-family: 'Mansalva'
    // Don't use any particular variant to keep consistency with the logo on
    // the project webpage.
    font-variant: none
    font-size: 2.3rem
    color: var(--gray-0)
    vertical-align: super
