&TopNav{
    @apply fixed flex flex-col justify-between w-full min-h-[3rem] bg-white dark:bg-[#212121] text-[#555] dark:text-[#e1e1e1] z-[1001] md:items-center;
    @apply border-b border-[#c1c1c1] dark:border-[#515151];
}
&TopNav&.position-static{
    @apply static;
}
&TopNav .nav-content{
    @apply flex items-center h-full px-4 min-h-[3rem] space-x-1 justify-between md:justify-start;
}
&TopNav .nav-brand {
    @apply text-lg font-semibold;
}
&TopNav .nav-content-toggle {
    @apply flex hidden w-full items-center;
}
&TopNav .nav-content-wide{
    @apply hidden md:flex items-center;
}
&TopNav ul {
    @apply flex flex-col py-1 px-3;
}
&TopNav ul li {
    @apply list-none;
}
&TopNav ul li a {
    @apply text-[#212121] dark:text-white py-1 my-2 px-2 dark:hover:bg-[#515151] hover:bg-[#e1e1e1] no-underline w-full inline-block rounded-sm;
}
&TopNav ul li button{
    @apply my-2;
}
&TopNav .nav-toggle-button {
    @apply block;
}
&TopNav .bar {
    @apply block w-6 h-0.5 mt-1 bg-[#212121] dark:bg-white my-1.5;
}

&TopNav&.active .nav-content-toggle{
    @apply block md:flex;
}

&TopNav .md-hidden{
    @apply block md:hidden md:m-0;
}

@screen md {
    &TopNav{
        @apply flex-row;
    }
    &TopNav .navbar {
        @apply flex;
    }
    &TopNav .nav-toggle-button {
        @apply hidden;
    }
    &TopNav .nav-content-toggle {
        @apply flex justify-between w-auto mt-0;
    }
    &TopNav ul{
        @apply flex-row space-x-4;
    }
}