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

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

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

  .fullName {
    margin-bottom: 0;

    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.375rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .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;

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