How do you remove the top dotted bar in firefox

Question

I've got a simple navbar in my app nothing special

nav ul li a 

in chrome safari brave it is fine but in firefox I've got an ugly top dotted bar when I click a link

Is there a way to get rid of it?

I've tried with:

a::-moz-focus-inner {
  border: 0;
}

it doesn't work :(

CODE in a svelteKit application

<header
    class="sticky top-0 z-50 h-[50px] flex justify-start items-center px-3 md:px-9 lg:px-10 3xl:px-28 pt-5 bg-white/0"
>
    <a class="block" href="/"
        ><figure><img src="/images/logo.png" alt="Myapp" width="110" height="25" /></figure>
        <!--<Brand>-->
        <h1 class="hidden">Myapp</h1></a
    >
    <nav class="ml-auto hidden lg:block">
        <ul class="flex gap-4">
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/one">One</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-black/90 text-white"
            >
                <a class="custom" sveltekit:prefetch="" href="/two">Two</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/three">Three</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/four">Four</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/five">Five</a>
            </li>
            <li class="pl-[85px]">
                <div
                    class="flex justify-center items-center w-[38px] h-[38px] shadow-sm rounded-xl bg-white/90"
                >
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >stuff of svg</svg
                    >
                </div>
                <!--<NavSearch>-->
            </li>
            <li
                class="flex justify-center items-center shadow-sm rounded-xl uppercase tracking-tight bg-white/90"
            >
                <div class="my-app-login">
                    <button
                        class="wallet-adapter-button wallet-adapter-button-trigger"
                        style="justify-content: center;"
                    >
                        Select Wallet
                    </button><!--<WalletButton>-->
                    <!--<WalletMultiButton>-->
                </div>
                <!--<Login>-->
            </li>
        </ul>
        <!--<Nav>-->
    </nav>
</header>