@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;

    &.disallow {
      background-color: red;
    }

    ul {
      li {
        display: inline-block;
        margin-right: 10px;

        .item {
          color: #dddddd;
          display: block;
          padding: 0.5rem 1rem;
          text-decoration: none;
          transition: border 100ms ease-in-out, color 100ms ease-in-out;
          cursor: pointer;
          border-bottom: 2px solid transparent;

          &.active {
            color: white;
            border-bottom: 2px solid #824dc3;
          }

          &:not(.active):hover {
            border-bottom: 2px solid $accent-color;
          }
        }
      }
    }
  }

  .settings {
    height: 60%;
    margin: auto 1rem;
    cursor: pointer;
    filter: brightness(80%);
    transition: filter 100ms ease-in-out;

    &:hover {
      filter: brightness(100%);
    }
  }
}