Numbered pagination on Archive page with style

archive-numbered-pagination.php

<?php
if( have_posts() ):
    while( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', get_post_format() );
    endwhile;

    the_posts_pagination(array(
        'mid_size'  => 2,
        'prev_text' => __('« Previous'),
        'next_text' => __('Next »'),
    ) );
endif;
?>

<style>
.pagination {
    .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        gap: 10px;
    
        > * {
            height: 40px;
            min-width: 40px;
            line-height: 40px;
            padding: 0 5px;
            align-items: center;
            display: flex;
            justify-content: center;
            border: 1px solid #6b7280;
            font-size: 16px;
            font-weight: 600;
            color: #6b7280;
    
            &.prev,
            &.next {
                width: auto;
                border: 0;
                color: #6b7280;
            }
    
            &.current, 
            &:not(.prev):not(.next):hover {
                border-color: #c17169;
                background-color: #c17169;
                color: #fff;
            }
            &.prev:hover,
            &.next:hover {
                color: #c17169;
            }
        }
    }
}
</style>