:Focus Not Working for Search bar Input Styling

Question

I have a search bar that displays an outer glow effect with animation when the user hovers over it. the :hover works just fine, but I also want to be able to see this outer glow animation when the user activates or focuses the search bar. The :active also works, but the :focus does not. Please help:

HTML:

<form action="" class="navbar-search">
    <div class="navbar-search-input-wrapper" tabindex="0">
        <input 
            type="text"
            name='search'
            placeholder="Search objects and widgets"
            autocomplete="off"
            tabindex="0"
            onclick="this.focus()"
            class="navbar-search-input">
    </div>
</form>

CSS:

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family:Verdana, Geneva, Tahoma, sans-serif, FontAwesome;
    box-sizing: border-box;
}


.navbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    position: sticky;
    background-color: #ffffff;
}

.navbar-search {
    border: 1px double #000000;
    border-radius: 3.125rem;
    height: 2.188rem;
    width: 18.75rem;
    display: flex;
    align-items: center;
}


.navbar-search:hover,
.navbar-search:active,
.navbar-search:focus {
    border: 1px double #ffffff;
}

.navbar-search-input-wrapper {
    position:relative;
    border: none;
    border-radius: 3.125rem;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #111;
}

.navbar-search-input {
    position:relative;
    border: none;
    border-radius: 3.125rem;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #111;
    padding-left: 0.625rem;

}


.navbar-search-input-wrapper:before,
.navbar-search-input-wrapper:active:before,
.navbar-search-input-wrapper:focus-within:before {
    content:'';
    position: absolute;
    background: inherit;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 50px;
    filter: blur(35px);
    opacity: 0;
    transition: opacity 0.1s;
}


.navbar-search-input-wrapper:hover:before,
.navbar-search-input-wrapper:active:before,
.navbar-search-input-wrapper:focus-within:before{
    opacity: 1;
    z-index: -1;
}


.navbar-search-input-wrapper:hover,
.navbar-search-input-wrapper:active,
.navbar-search-input-wrapper:focus {
    background-size: 400% !important;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    animation: glow 8s linear infinite;
    z-index: 1;
}

@keyframes glow {
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}