How to hide empty pagination button when no previous page

I’ve styled my pagination buttons to have a green background. When there is no previous page (or next page) the pagination link disappears for good reason but it leaves a green empty button with no text.

I’ve tried targeting this with JS, messing around with the functions.php function and a few other things to no avail.

here is my code in the functions.php page

function pagination_nav() {
    global $wp_query;

    if ( $wp_query->max_num_pages > 1) { ?>
        <nav class="pagination" role="navigation">
            <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( 'Previous' ); ?></div>
            <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( 'Next' ); ?></div>
        </nav>
<?php }
}

here is the code calling the function in my template page

    <div class="pag-container">
        <?php pagination_nav(); ?>
    </div>

here is my scss

.pag-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

    .pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64%;

        .pag-btn{
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image:linear-gradient(to bottom, $dark-green, $light-green);
            margin: 0rem 1rem;
        }

        a{
            color: white;
            font-size: 1.3rem;
        }
    }
}

and for good measure here is the JS that i tried

const prvBtn = document.getElementById('prv').innerHTML;
const nxtBtn = document.getElementById('nxt').innerHTML;

function hidePagBttns() {
    if (prvBtn === '') {
        prvBtn.style.display = 'none';
    } else {
        if (nxtBtn === '') {
            nxtBtn.style.display = 'none';
        }
    }
}