.menu{
    @apply flex flex-col text-gray-800 p-4 rounded-lg border-2 sui-color-primary;
    &__item{
        @apply px-4 py-2 flex-1 rounded-lg;
        &:hover{
            @apply sui-background-primary text-gray-200 cursor-pointer;
        }
    }
    &__group{
        @apply  pb-2 bg-gray-200 rounded-lg mt-4;
        .menu__heading {
            @apply text-xs font-black sui-color-secondary px-4 py-2 bg-gray-200 rounded-t-lg;
        }
        .menu__item{
            @apply mx-2 px-4 py-2 text-sm flex-1 text-gray-800 border-0;
            &:hover{
                @apply sui-background-secondary text-gray-100;
            }
        }
    }
    
}