/**
 * VDI Navs & Menu - Auxiliary Nav Styles
 *
 * Please review documentation upon first use, and, as-needed:
 * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
 */

.nav-aux {
    @apply relative flex flex-wrap gap-2 items-center justify-end p-0 m-0;

    .menu-vdi {
        @apply relative flex flex-wrap gap-4 items-center gap-y-2 gap-x-4 p-0 m-0;

        .menu-vdi__toggle {
            /* styles */
            @apply flex items-center gap-2;
            /* interaction */
            @apply focus-visible:underline hover:underline;
        }
    }
}

/* desktop overrides */
@media screen and (min-width: 62.5rem) {
    .nav-aux {
        @apply gap-4;

        .menu-vdi {
            @apply justify-end;

            .menu-vdi__toggle {
                @apply flex items-center gap-2;
            }
        }
    }
}