@layer components {
  [data-coco][data-component="user-profile-menu-item"] {
    @apply px-4 py-1.5 grid grid-rows-1 gap-3;
    grid-template-columns: min-content 1fr;

    .user-profile-avatar {
      @apply flex items-center;
    }

    .user-profile-details {
      @apply space-y-1 overflow-hidden flex flex-col justify-center;
    }

    .user-profile-name {
      @apply font-semibold truncate;
    }

    .user-profile-email {
      @apply text-gray-500 label-sm italic truncate;
    }
  }
}