// This class is used in `ghostAnimation`, so we need to keep it global
.ProfileInfo {
  aspect-ratio: 1 / 1;
  position: relative;

  @supports not (aspect-ratio: 1 / 1) {
    &::before {
      float: left;
      padding-top: 100%;
      content: "";
    }

    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }

  .fullName {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.375rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
  }

  .VerifiedIcon,
  .StarIcon {
    --color-fill: var(--color-white);
    --color-checkmark: var(--color-primary);

    z-index: 2;
    opacity: 0.8;
  }

  .emoji:not(.custom-emoji) {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
  }

  .custom-emoji {
    --custom-emoji-size: 1.5rem;

    color: var(--color-white) !important;
    pointer-events: auto;
    cursor: var(--custom-cursor, pointer);
  }
}