@use '../../../../mx-core/src/base/typography';
@use '../../../../mx-core/src/base/shape';

:host {
  display: flex;
  align-items: center;
  gap: 8px;

  &.mat-mdc-menu-trigger {
    @extend .rounded-x-sm;
    height: 40px;
    padding: 0 8px;
    cursor: pointer;
    .mx-avatar-profile__dropdown-icon {
      display: block;
    }
  }
}

.mx-avatar-profile {
  &__user-name {
    @extend .gl-body-md;
  }

  &__user-info {
    @extend .gl-body-sm;
  }

  &__dropdown-icon {
    display: none;
  }
}