/*
 * Shared CMS pagination — structural styles.
 *
 * All colours, sizes, and spacings are driven by CSS custom properties so
 * each theme can override them without touching this file. Set overrides
 * inside a .cms-pagination selector in your theme's style.css, e.g.:
 *
 *   .cms-pagination {
 *     --cms-pagination-item-size: 40px;
 *     --cms-pagination-font-family: var(--font-ui);
 *   }
 */

/* --------------------------------------------------------------------------
   CSS variables — defaults
   -------------------------------------------------------------------------- */
:root {
    --cms-pagination-gap:               4px;
    --cms-pagination-wrap-padding:      2rem 0;
    --cms-pagination-item-size:         38px;
    --cms-pagination-item-px:           10px;
    --cms-pagination-radius:            6px;
    --cms-pagination-font-family:       inherit;
    --cms-pagination-font-weight:       600;
    --cms-pagination-font-size:         0.875rem;
    --cms-pagination-letter-spacing:    0;
    --cms-pagination-text-transform:    none;
    --cms-pagination-transition:        background 0.15s, color 0.15s, border-color 0.15s;
    --cms-pagination-color:             currentColor;
    --cms-pagination-bg:                transparent;
    --cms-pagination-border:            1px solid currentColor;
    --cms-pagination-hover-color:       inherit;
    --cms-pagination-hover-bg:          transparent;
    --cms-pagination-hover-border:      currentColor;
    --cms-pagination-active-bg:         currentColor;
    --cms-pagination-active-color:      #fff;
    --cms-pagination-active-border:     currentColor;
    --cms-pagination-disabled-opacity:  0.4;
}

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.cms-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cms-pagination-gap);
    padding: var(--cms-pagination-wrap-padding);
}

/* --------------------------------------------------------------------------
   Lists — one visible at a time (wide or narrow)
   -------------------------------------------------------------------------- */
.cms-pagination__list {
    display: flex;
    list-style: none;
    gap: var(--cms-pagination-gap);
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Narrow list is hidden on wide viewports */
.cms-pagination__list--narrow {
    display: none;
}

@media (max-width: 575.98px) {
    /* Switch to narrow on small screens */
    .cms-pagination__list--wide {
        display: none;
    }
    .cms-pagination__list--narrow {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   Links, spans, prev/next
   -------------------------------------------------------------------------- */
.cms-pagination__link,
.cms-pagination__prev,
.cms-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cms-pagination-item-size);
    height: var(--cms-pagination-item-size);
    padding: 0 var(--cms-pagination-item-px);
    border-radius: var(--cms-pagination-radius);
    font-family: var(--cms-pagination-font-family);
    font-weight: var(--cms-pagination-font-weight);
    font-size: var(--cms-pagination-font-size);
    letter-spacing: var(--cms-pagination-letter-spacing);
    text-transform: var(--cms-pagination-text-transform);
    color: var(--cms-pagination-color);
    background: var(--cms-pagination-bg);
    border: var(--cms-pagination-border);
    line-height: 1;
    transition: var(--cms-pagination-transition);
    cursor: pointer;
    text-decoration: none;
}

a.cms-pagination__link:hover,
a.cms-pagination__prev:hover,
a.cms-pagination__next:hover,
button.cms-pagination__link:hover,
button.cms-pagination__prev:hover,
button.cms-pagination__next:hover {
    color: var(--cms-pagination-hover-color);
    background: var(--cms-pagination-hover-bg);
    border-color: var(--cms-pagination-hover-border);
}

/* --------------------------------------------------------------------------
   Current page
   -------------------------------------------------------------------------- */
.cms-pagination__item--current .cms-pagination__link {
    background: var(--cms-pagination-active-bg);
    border-color: var(--cms-pagination-active-border);
    color: var(--cms-pagination-active-color);
    cursor: default;
}

/* --------------------------------------------------------------------------
   Gaps (ellipsis) and disabled arrows
   -------------------------------------------------------------------------- */
.cms-pagination__item--gap .cms-pagination__link,
.cms-pagination__prev--disabled,
.cms-pagination__next--disabled {
    opacity: var(--cms-pagination-disabled-opacity);
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Button reset — client-side paginator renders <button> elements
   -------------------------------------------------------------------------- */
button.cms-pagination__link,
button.cms-pagination__prev,
button.cms-pagination__next {
    appearance: none;
    -webkit-appearance: none;
    background: var(--cms-pagination-bg);
}