.bz-user {
  align-items: center;
  display: flex;
}

.bz-user__info {
  margin-right: $bz-space-inline-m;

  > p {
    color: $bz-neutral-100;
    margin-bottom: 0;
    text-align: right;

    &.bz-user__name, &:first-child {
      color: $bz-neutral-100;
      font-weight: $bz-font-weight-semibold;
      line-height: 1.5;
    }

    &.bz-user__email, &:last-child {
      font-size: $bz-font-size-body-small;
    }
  }
}

.bz-user__avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: $bz-neutral-300;
  cursor: pointer;
  position: relative;
  transition: all .3s ease-in-out;
  
  &:hover {
    background-color: $bz-theme-100;
    
    .bz-user__avatar-label {
      color: $bz-theme-500;
    }
  }
}

.bz-user__avatar-label {
  color: $bz-neutral-600;
  font-size: $bz-font-size-subheading;
  font-weight: $bz-font-weight-semibold;
  line-height: 48px;
  text-transform: uppercase;
}

.bz-nav-panel {
  background-color: $bz-neutral-100;
  border-radius: $bz-border-radius-m;
  box-shadow: $bz-shadow-xs;
  color: $bz-neutral-100;
  display: none;
  min-width: 18rem;
  padding: $bz-space-inset-s;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1000;

  &.show {
    display: block;
  }

  > li > a {
    display: block;
    padding: $bz-space-inset-squish-s;
    text-decoration: none;

    &:focus,
    &:hover {
      background-color: darken($bz-neutral-100, 5%);
    }
  }
}