/**
 * File: woo-pagination.css
 * Purpose: Custom styles for WooCommerce pagination elements
 * Usage: Applies to native WooCommerce and DWE pagination wrappers
 * Dependencies: Targets `.woocommerce-pagination` and `.dwe_woo_products_pagination_wrapper`
 *
 * Notes:
 * - Applies consistent spacing and border resets
 * - Uses CSS variables for color control across normal, hover, and active states
 * - Designed for visual alignment with theme's button/link styles
 *
 * Key Selectors:
 * - `<ul>` and `<li>` wrappers
 * - `<a>` and `<span>` tags inside pagination items
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.woocommerce-pagination,
.dwe_woo_products_pagination_wrapper
 {
/* ------ Not in use in the current site as far as I can see. Monitor & possibly remove --------- */
    --woo-pagination-border-color: var(--global-button-border-color);
    --woo-pagination-bg-color: var(--global-button-bg-color);
    --woo-pagination-font-color: var(--global-button-font-color);
    --woo-pagination-active-bg-color: var(--global-button-bg-hover-color);
    --woo-pagination-active-border-color: var(--brand-orange-light);
    --woo-pagination-active-font-color: var(--global-button-font-hover-color);
}

/* -------------------------- */


    
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li,
.dwe_woo_products_pagination_wrapper ul,
.dwe_woo_products_pagination_wrapper ul li
{
    border: 0px solid!important;
    margin-right: 0px!important;
}


.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.dwe_woo_products_pagination_wrapper ul li a,
.dwe_woo_products_pagination_wrapper ul li span
{
    margin:2px!important;
    background-color: var(--woo-pagination-bg-color)!important;
    border: 1px solid var(--woo-pagination-border-color)!important;
    color: var(--woo-pagination-font-color)!important;
    font-weight:700;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, 
.woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current,
.dwe_woo_products_pagination_wrapper ul li a:focus,
.dwe_woo_products_pagination_wrapper ul li a:hover,
.dwe_woo_products_pagination_wrapper ul li.active a
{
    background: var(--woo-pagination-active-bg-color)!important;
    border: 1px solid var(--woo-pagination-active-border-color)!important;
    color: var(--woo-pagination-active-font-color)!important;
}