@layer components {
    nav {
        @apply mx-auto max-w-3xl py-5;
        @apply md:flex md:justify-between md:items-center; /* Transition css only for mobile */
        @apply font-semibold relative;

        & > .nav-main {
            @apply max-md:flex max-md:justify-between max-md:items-center;

            & > .nav-mobile {
                @apply md:hidden scale-125;
            }
        
            & > .nav-home {
                @apply uppercase font-semibold text-lg;
            }
        }

        & > .nav-links {
            @apply max-md:transition-transform max-md:scale-y-0; /* Transition css only for mobile */
            @apply w-full flex flex-col gap-3 md:w-auto md:flex-row;
            @apply bg-surface dark:bg-dark_surface;
            @apply max-md:my-5 max-md:p-5 max-md:border-2 max-md:absolute max-md:z-10;

            &.open {
                @apply max-md:scale-y-100; /* Transition css only for mobile */
            }
        }

        & a {
            @apply transition-colors duration-500;
            &:hover {
                @apply text-primary underline;
            }
        }
    }
}