.account-dropdown-wrapper{
    @apply relative inline-flex;
}
.account-dropdown-navigation{
    @apply py-1 ps-1 pe-4 inline-flex items-center gap-x-1 text-sm font-medium focus:outline-none disabled:opacity-50 disabled:pointer-events-none;
    @apply rounded-full border shadow-sm;
    @apply border-gray-200 bg-white text-gray-800 hover:bg-gray-50 focus:bg-gray-50;
    @apply dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
    &.--with-name{
        @apply min-w-[125px] pe-3 gap-x-2;
    }
}

.account-dropdown-profile{
    @apply w-8 h-8 rounded-full
}
.account-dropdown-name{
    @apply flex-1 font-medium truncate text-left leading-3;
    @apply text-gray-600;
    @apply dark:text-neutral-400;
}
.account-dropdown-caret{
    @apply w-5 h-5 flex-[0_0_1.25rem];
}
.account-dropdown-menu-wrapper{
    @apply z-[2] transition-[opacity,margin] duration-200 opacity-0 min-w-[150px] bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2;
}
.account-dropdown-email{
    @apply py-2 px-4 bg-gray-100 rounded-t-lg;
    .text-signed{
        @apply text-sm text-gray-400;
    }
    .text-email{
        @apply text-sm font-medium text-gray-700;
    }
}
.account-dropdown-menu{
    @apply py-2 first:pt-0 last:pb-0
}
.account-dropdown-menu-item{
    @apply flex items-center gap-x-[.4rem] py-2 px-3 rounded-lg text-sm;
    @apply text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100;
}