#app > header {
  display: flex;
  flex-direction: column;
}

#app > header > nav {
  flex: 1;
}

#app > header > * {
  padding: 8px;
}

#app > header > nav {
  display: flex;
  flex-direction: column;
  padding: 0;

  margin-top: 1em;

  a {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: calc(100% - 16px);
    font-size: 1.25em;
    padding: 0.5em 8px;
    border-radius: 8px;

    transition-property: background-color;

    &:hover {
      background-color: rgb(var(--col-bg-2) / 1);
    }

    &[aria-disabled="true"],
    &[aria-disabled="true"]:hover {
      background-color: rgb(var(--col-bg-0) / 1);
      color: rgb(var(--col-fg-muted) / 0.5);
      pointer-events: none;
      user-select: none;
    }

    &.highlight {
      margin-top: 2em; /* trust me im a professional */
      transition-property: background-color color border-color;
      background-color: rgb(var(--col-bg-1) / 1);
      border: 1px solid rgb(var(--col-bg-3) / 0.75);
      font-size: 1rem;
      padding: 0.5em 0;
      width: calc(100% - 2px);
      justify-content: center;

      &:hover {
        color: black;
        background-color: rgb(var(--col-accent) / 1);
        border-color: rgb(var(--col-accent) / 0.75);
      }

      .lucide {
        margin-left: -8px;
      }
    }

    & > svg {
      margin-right: 0.5em;
    }
  }
}

#app > header #self-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;

  border-radius: 8px;
  height: 3em;

  padding: 0.25em 0.75em;

  transition-property: background-color;

  .avatar {
    height: 32px;
  }

  &:hover {
    background-color: rgb(var(--col-bg-3) / 1);
  }

  #name {
    display: flex;
    flex-direction: column;
    padding-top: 1px;
  }

  .handle:hover {
    text-decoration: none;
  }
}
