.tzq-pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: var(--tzq-spacing-md);
}
.tzq-pagination-info {
display: flex;
align-items: center;
justify-content: center;
}
.tzq-pagination-info__text {
font-size: var(--tzq-text-sm);
color: var(--tzq-text-secondary);
font-weight: var(--tzq-font-medium);
}
.tzq-pagination,
nav.tzq-pagination {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.tzq-pagination__list,
.tzq-pagination .page-numbers,
.tzq-pagination ul.page-numbers,
.tzq-pagination div.page-numbers {
display: flex;
gap: var(--tzq-spacing-xs);
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
}
.tzq-pagination__item,
.tzq-pagination .page-numbers li,
.tzq-pagination ul.page-numbers li {
margin: 0;
list-style: none;
display: inline-flex;
padding: 0;
}
.tzq-pagination__link,
.tzq-pagination .page-numbers a,
.tzq-pagination .page-numbers span,
.tzq-pagination a.page-numbers,
.tzq-pagination span.page-numbers,
.tzq-pagination .page-numbers > a,
.tzq-pagination .page-numbers > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--tzq-spacing-md);
background: var(--tzq-gradient-primary);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
color: var(--tzq-text-inverse);
text-decoration: none;
font-weight: 600;
font-size: var(--tzq-text-base);
line-height: 1;
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
box-sizing: border-box;
}
.tzq-pagination__link--current,
.tzq-pagination .page-numbers .current,
.tzq-pagination__link.current,
.tzq-pagination .page-numbers span.current,
.tzq-pagination .page-numbers a.current,
.tzq-pagination span.page-numbers.current,
.tzq-pagination a.page-numbers.current,
.tzq-pagination .page-numbers > span.current,
.tzq-pagination .page-numbers > a.current {
background: var(--tzq-primary);
border-color: var(--tzq-primary);
color: var(--tzq-text-inverse);
font-weight: var(--tzq-font-bold);
cursor: default;
pointer-events: none;
box-shadow: 0 4px 12px rgba(var(--tzq-primary-rgb), 0.3);
transform: scale(1.05);
}
.tzq-pagination__link--dots,
.tzq-pagination .page-numbers .dots,
.tzq-pagination .page-numbers span.dots,
.tzq-pagination .page-numbers a.dots,
.tzq-pagination span.page-numbers.dots,
.tzq-pagination a.page-numbers.dots,
.tzq-pagination .page-numbers > span.dots,
.tzq-pagination .page-numbers > a.dots {
background: transparent;
border: 1px solid var(--tzq-primary-light);
cursor: default;
pointer-events: none;
color: var(--tzq-text-muted);
min-width: auto;
padding: 0 var(--tzq-spacing-xs);
}
.tzq-pagination__link--prev,
.tzq-pagination .page-numbers .prev,
.tzq-pagination .page-numbers a.prev,
.tzq-pagination .page-numbers span.prev,
.tzq-pagination a.page-numbers.prev,
.tzq-pagination span.page-numbers.prev,
.tzq-pagination .page-numbers > a.prev,
.tzq-pagination .page-numbers > span.prev {
font-weight: 700;
}
.tzq-pagination__link--next,
.tzq-pagination .page-numbers .next,
.tzq-pagination .page-numbers a.next,
.tzq-pagination .page-numbers span.next,
.tzq-pagination a.page-numbers.next,
.tzq-pagination span.page-numbers.next,
.tzq-pagination .page-numbers > a.next,
.tzq-pagination .page-numbers > span.next {
font-weight: 700;
}
.tzq-pagination__link:hover:not(.tzq-pagination__link--current):not(
.tzq-pagination__link--dots
):not([aria-disabled="true"]),
.tzq-pagination .page-numbers a:hover:not(.current):not(.dots),
.tzq-pagination a.page-numbers:hover:not(.current):not(.dots),
.tzq-pagination .page-numbers > a:hover:not(.current):not(.dots) {
background: var(--tzq-bg-secondary);
border-color: var(--tzq-primary);
color: var(--tzq-primary);
transform: translateY(-1px);
box-shadow: var(--tzq-shadow-primary-md-alt);
}
.tzq-pagination__link:focus,
.tzq-pagination .page-numbers a:focus,
.tzq-pagination a.page-numbers:focus,
.tzq-pagination .page-numbers > a:focus {
outline: 2px solid var(--tzq-primary);
outline-offset: 2px;
z-index: 1;
position: relative;
}
.tzq-pagination__link:active:not(.tzq-pagination__link--current):not(
.tzq-pagination__link--dots
),
.tzq-pagination .page-numbers a:active:not(.current):not(.dots),
.tzq-pagination a.page-numbers:active:not(.current):not(.dots),
.tzq-pagination .page-numbers > a:active:not(.current):not(.dots) {
transform: translateY(0);
box-shadow: var(--tzq-shadow-primary-sm);
background: var(--tzq-primary);
border-color: var(--tzq-primary);
color: var(--tzq-text-inverse);
}
body.tzq-dark-mode .tzq-pagination__link,
body.tzq-dark-mode .tzq-pagination .page-numbers a,
body.tzq-dark-mode .tzq-pagination .page-numbers span,
body.tzq-dark-mode .tzq-pagination a.page-numbers,
body.tzq-dark-mode .tzq-pagination span.page-numbers,
[data-theme="dark"] .tzq-pagination__link,
[data-theme="dark"] .tzq-pagination .page-numbers a,
[data-theme="dark"] .tzq-pagination .page-numbers span,
[data-theme="dark"] .tzq-pagination a.page-numbers,
[data-theme="dark"] .tzq-pagination span.page-numbers {
background: var(--tzq-bg-secondary);
border-color: var(--tzq-border-dark);
color: var(--tzq-text-primary);
}
body.tzq-dark-mode
.tzq-pagination__link:hover:not(.tzq-pagination__link--current):not(
.tzq-pagination__link--dots
),
body.tzq-dark-mode
.tzq-pagination
.page-numbers
a:hover:not(.current):not(.dots),
body.tzq-dark-mode
.tzq-pagination
a.page-numbers:hover:not(.current):not(.dots),
[data-theme="dark"]
.tzq-pagination__link:hover:not(.tzq-pagination__link--current):not(
.tzq-pagination__link--dots
),
[data-theme="dark"]
.tzq-pagination
.page-numbers
a:hover:not(.current):not(.dots),
[data-theme="dark"]
.tzq-pagination
a.page-numbers:hover:not(.current):not(.dots) {
background: var(--tzq-bg-primary);
border-color: var(--tzq-primary);
}
.tzq-archive__pagination,
.tzq-archive-pagination {
margin: 0;
}
.tzq-archive__pagination .tzq-pagination-wrapper,
.tzq-archive-pagination .tzq-pagination-wrapper {
margin: var(--tzq-spacing-2xl) auto;
}
.tzq-archive__pagination .tzq-pagination,
.tzq-archive-pagination .tzq-pagination {
margin: 0;
}
.tzq-pagination-wrapper .tzq-pagination,
.tzq-pagination-wrapper nav.tzq-pagination {
margin: 0;
}
body.tzq-dark-mode .tzq-pagination-wrapper,
[data-theme="dark"] .tzq-pagination-wrapper {
background: var(--tzq-gradient-primary-medium);
box-shadow: var(--tzq-shadow-black-xl);
}