.tt-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--step--2);
    padding: var(--step--2) var(--step--4);
    border-bottom: var(--border-thin) solid var(--bg-muted);
    --tt-pagination-border-color: var(--paragraph-color);
}

.tt-pagination--strong-divider {
    border-bottom: 1px solid var(--text-color);
}

.tt-pagination-count {
    font-size: var(--step--2);
    color: var(--text-muted);
    margin-right: auto;
}

/* Button group: collapse borders */
.tt-pagination .tt-btn-group {
    gap: 0;
}
.tt-pagination .tt-btn-group > .tt-btn:not(:first-child) {
    border-left: none;
}

/*
 * All border-color declarations live here at 0,3,0 specificity so they
 * beat the `button.tt-btn` base rule (0,1,1) that sets border transparent.
 * Standalone classes below only set background / color / cursor.
 */
.tt-pagination .tt-btn-group > .tt-btn {
    min-width: 2.25em;
    border-color: var(--tt-pagination-border-color);
}
.tt-pagination .tt-btn-group > .tt-pagination-arrow {
    border-color: var(--primary-color);
}
.tt-pagination .tt-btn-group > .tt-pagination-arrow:not(:disabled):hover {
    border-color: var(--primary-hover-color);
}
.tt-pagination .tt-btn-group > .tt-pagination-arrow:disabled {
    border-color: var(--tt-pagination-border-color);
}

/* Page number buttons */
.tt-pagination-btn {
    background-color: var(--bg-color);
    color: var(--paragraph-color);
}
.tt-pagination-btn:not(:disabled):hover {
    background-color: var(--bg-muted-hover);
    color: var(--heading-color);
}

/* Current page: primary tint, not interactive */
.tt-pagination .tt-pagination-current,
.tt-pagination-current:hover {
    background-color: color-mix(in srgb, var(--primary-color) 12%, var(--bg-color));
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    cursor: default;
    opacity: 1;
}

/* Arrow buttons: self-contained primary navigation button */
.tt-pagination-arrow {
    background-color: var(--primary-color);
    color: var(--bg-color);
}
.tt-pagination-arrow:not(:disabled):hover {
    background-color: var(--primary-hover-color);
    color: var(--bg-color);
}
.tt-pagination-arrow:disabled {
    background-color: var(--bg-muted);
    color: var(--text-muted);
    cursor: default;
}

/* Ellipsis separator */
.tt-pagination-ellipsis {
    background-color: var(--bg-muted);
    color: var(--text-muted);
    pointer-events: none;
    cursor: default;
}