@utility navbar-* {
    background-color: --value(--color-*);
    color: --value(--text-bg-*);

    .nav-link,
    .navbar-brand,
    .navbar-toggle {
        color: --alpha(--value(--color-bg-*) / 80%);

        &.active,
        &:hover {
            color: --value(--color-bg-*);
        }
    }
}

@utility navbar-transparent-* {
    background-color: transparent;
    color: --value(--color-bg-*);

    &.scrolled {
        background-color: --value(--color-*);
        @apply shadow-xs;
    }

    .nav-link,
    .navbar-brand,
    .navbar-toggle {
        color: --alpha(--value(--color-bg-*) / 80%);

        &.active,
        &:hover {
            color: --value(--color-bg-*);
        }
    }
}

@layer components {
    .nav {
        @apply flex space-x-2 rtl:space-x-reverse md:space-x-3 md:rtl:space-x-reverse items-center flex-wrap;

        &.vertical {
            @apply flex-col space-x-0 md:space-x-0 space-y-3;

            .nav-link {
                @apply flex w-full truncate space-x-2 rtl:space-x-reverse px-3 py-2;
            }
        }
    }

    .nav-link {
        @apply inline-flex space-x-1 rtl:space-x-reverse items-center text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 transition duration-150 ease-in-out py-2 leading-5;

        &.bordered {
            @apply border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-300 dark:focus:border-gray-700;
        }

        &.active {
            @apply text-gray-900 dark:text-gray-100;

            &.bordered {
                @apply border-primary-400 dark:border-primary-600;

            }
        }
    }


    .navbar-toggle {
        @apply relative p-2 rounded-lg transition-colors w-8 h-8 lg:hidden;

        &:after {
            @apply content-[""];
            @apply absolute top-0 start-0 end-0 bottom-0;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(107, 114, 128, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
        }

        @variant hover {
            &:after {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(55, 65, 81, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
            }
        }

        @variant dark {
            &::after {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(209, 213, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
            }

            @variant hover {
                &:after {
                    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
                }
            }
        }
    }

    .navbar {
        @apply relative flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10;

        &.transparent {
            @apply bg-transparent;
        }

        .nav {
            &.navbar-collapse {
                @apply hidden;

                &.expand-sm {
                    @apply sm:flex;
                }

                &.expand-md {
                    @apply md:flex;
                }

                &.expand-lg {
                    @apply lg:flex;
                }

                &.expand-xl {
                    @apply xl:flex;
                }
            }
        }
    }
}