@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-coco-gray-500 label-sm italic truncate; } } }