/**
 * Shared pagination (.paginate from layout.pagination component).
 */

.paginate {
    margin-top: var(--vgl-space-8);
    margin-bottom: var(--vgl-space-6);
    padding-top: var(--vgl-space-6);
    border-top: 1px solid var(--vgl-color-border);
    text-align: center;
}

.paginate .page-numbers {
    display: inline-block;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: var(--vgl-space-1) var(--vgl-space-3);
    margin: 0 var(--vgl-space-1);
    border: 1px solid var(--vgl-color-primary);
    border-radius: var(--vgl-radius);
    color: var(--vgl-color-primary);
    font-size: var(--vgl-font-size-base);
    line-height: 1.5;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color var(--vgl-transition), color var(--vgl-transition);
}

.paginate .page-numbers:hover,
.paginate .page-numbers:focus {
    border-color: var(--vgl-color-accent);
    color: var(--vgl-color-accent);
    text-decoration: none;
}

.paginate .page-numbers.current {
    border-color: var(--vgl-color-border);
    color: var(--vgl-color-text-muted);
    cursor: default;
}

.paginate .page-numbers.current:hover,
.paginate .page-numbers.current:focus {
    border-color: var(--vgl-color-border);
    color: var(--vgl-color-text-muted);
}

.paginate .page-numbers.dots {
    border-color: var(--vgl-color-border);
    color: var(--vgl-color-text-muted);
    cursor: default;
}

.paginate .page-numbers.dots:hover,
.paginate .page-numbers.dots:focus {
    border-color: var(--vgl-color-border);
    color: var(--vgl-color-text-muted);
}