@import "../../../scss/variables";

logged-in-user-widget {
  display: block;
  font-weight: normal;
  position: relative;
  cursor: pointer;
  white-space: nowrap;

  &:empty {
    display: none;
  }

  .menu-trigger {
    display: flex;
    align-items: center;
    max-width: 250px;
    overflow: hidden;

    .email {
      margin-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .avatar {
      height: 40px;
      width: 40px;
      flex: 0 0 40px;
      object-fit: cover;
    }

    .mobile-toggle {
      display: none;

      .mat-icon {
        display: block;
      }
    }

    @media only screen and (max-width: $navbar-breakpoint) {
      .avatar, .email, .dropdown-icon {
        display: none;
      }

      .mobile-toggle {
        display: block;
      }
    }
  }
}

.logged-in-user-widget-menu {
  .logout-item  > .mat-icon {
    color: $danger-bg-color;
  }
}