/************************************************************************************

    ██████╗  █████╗  ██████╗ ██╗███╗   ██╗ █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
    ██╔══██╗██╔══██╗██╔════╝ ██║████╗  ██║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
    ██████╔╝███████║██║  ███╗██║██╔██╗ ██║███████║   ██║   ██║██║   ██║██╔██╗ ██║
    ██╔═══╝ ██╔══██║██║   ██║██║██║╚██╗██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
    ██║     ██║  ██║╚██████╔╝██║██║ ╚████║██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                                                      
 ************************************************************************************/




.pages {
    display: flex;
    justify-content: center;
    width: auto;
}

    .pages a.page-numbers, 
    .pages span.page-numbers {
        display: inline-block;
        font-weight: 600;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 4px 12px;
        margin: 0 8px 0 0;
    }

    .pages a.page-numbers {
        color: var(--brand-color-black);
        background: var(--brand-color-white);
        position: relative;
    }

        .pages a.page-numbers:is( :hover, :focus, :active ) {
            color: var(--brand-color-white);
            background: var(--brand-color-blue);
            border: 1px solid var(--brand-color-blue);
            opacity: 1;
        }

    .pages .current {
        color: var(--brand-color-black);
        background: var(--brand-color-white);
        border: 1px solid var(--brand-color-blue) !important;
    }

    .pages a.next,
    .pages a.prev {
        width: 32px;
        height: 34px;
        color: var(--brand-color-white);
        background: var(--brand-color-blue);
    }

    .pages a.next {
        padding-right: 24px;
    }

    .pages a.prev {
        padding-left: 24px;
    }

        .pages a.next .label,
        .pages a.prev .label {
            display: none;
        }

    .pages a.next.page-numbers::after {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translatey(-50%) rotate(-90deg);
        content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32"><path fill="rgb(250,250,250)" d="M12.96 12.128q0.704-0.832 1.536 0 0.832 0.704 0 1.536l-6.272 6.144q-0.704 0.704-1.536 0l-6.272-6.144q-0.832-0.832 0-1.536 0.768-0.768 1.6 0l5.44 4.992z"></path></svg>' );
    }

    .pages a.prev.page-numbers::after {
        position: absolute;
        top: 50%;
        left: 6px;
        transform: translatey(-50%) rotate(90deg);
        content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32"><path fill="rgb(250,250,250)" d="M12.96 12.128q0.704-0.832 1.536 0 0.832 0.704 0 1.536l-6.272 6.144q-0.704 0.704-1.536 0l-6.272-6.144q-0.832-0.832 0-1.536 0.768-0.768 1.6 0l5.44 4.992z"></path></svg>' );
    }

    .pages a.next.page-numbers:hover::after {
        content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32"><path fill="rgb(250,250,250)" d="M12.96 12.128q0.704-0.832 1.536 0 0.832 0.704 0 1.536l-6.272 6.144q-0.704 0.704-1.536 0l-6.272-6.144q-0.832-0.832 0-1.536 0.768-0.768 1.6 0l5.44 4.992z"></path></svg>' );
    }

    .pages a.prev.page-numbers:hover::after {
        content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32"><path fill="rgb(250,250,250)" d="M12.96 12.128q0.704-0.832 1.536 0 0.832 0.704 0 1.536l-6.272 6.144q-0.704 0.704-1.536 0l-6.272-6.144q-0.832-0.832 0-1.536 0.768-0.768 1.6 0l5.44 4.992z"></path></svg>' );
    }