wabbajack/Wabbajack.App.Blazor/Components/TopBar.razor.scss

@import "../Shared/Globals.scss";

#top-bar {
  position: fixed;
  width: calc(100% - #{$sidebar-width});
  height: $header-height;
  background-color: transparent;
  backdrop-filter: blur(5px) grayscale(10%);
  z-index: 2;
  
  font-family: $raleway-font;
  text-transform: uppercase;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;

  nav {
    font-weight: 100;
    font-size: 1em;
    line-height: 2rem;
  }
  
  ul {
    li {
      display: inline-block;
      margin-right: 10px;
      a {
        color: white;
        display: block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        transition: background-color .25s ease-in-out;

        &:hover {
          border-bottom: 2px solid $accent-color;
        }
      }
    }
  }
}