header{
    .header-container{
        @apply h-12;
    }
    .header-container,
    .side-menu{
        @apply shadow-md;
        @apply bg-white dark:bg-dark-800 dark:text-gray-100;
    }
    
    .side-menu {
        @apply absolute pt-2 ease-in-out duration-150;
    }

    .drop-controller {
        min-width: 11rem;
        @apply hidden md:flex mr-0 ml-auto my-0 relative;

        .drop-menu{
            @apply w-36 m-auto cursor-pointer text-left rounded-b-lg flex flex-col;

            @apply text-gray-700 bg-white dark:bg-dark-800 dark:text-gray-300;

            @apply bg-white border-b border-l border-r border-transparent;

            a {
                @apply px-3 py-1;
                @apply text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-gray-100;
            }
        }

        &.hovered .drop-menu {
            @apply border-gray-200 shadow-md dark:border-dark-500;
        }
    }

    .user-menu{
        @apply m-auto cursor-default truncate whitespace-nowrap max-w-xs;
    }
}