/* Hallmark · component: pagination · modern-minimal · existing coral identity
 * Shared across public search, dashboards, directories, wallet, chat and tags.
 * Pre-emit critique: P5 H4 E4 S5 R5 V4
 */
@import url("./tokens.css");

nav.ah-pagination {
    --pager-surface: var(--ah-dashboard-color-paper-2);
    --pager-ink: var(--ah-dashboard-color-ink-2);
    --pager-muted: var(--ah-dashboard-color-muted);
    --pager-line: var(--ah-dashboard-color-rule);
    --pager-hover: var(--ah-dashboard-color-paper-3);
    --pager-accent: var(--ah-dashboard-color-accent);
    --pager-on-accent: var(--ah-dashboard-color-accent-ink);
    --pager-focus: var(--ah-dashboard-color-focus);
    container: ah-pagination / inline-size;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    font-family: var(--ah-dashboard-font-outlier);
    text-align: center;
}

.ah-pagination .ah-pagination__list,
.ah-pagination .ah-pagination__numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ah-pagination .ah-pagination__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.ah-pagination .ah-pagination__control,
nav.ah-pagination .ah-pagination__ellipsis {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    width: auto;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--pager-line);
    border-radius: 8px;
    background: var(--pager-surface);
    color: var(--pager-ink);
    box-shadow: none;
    font-family: var(--ah-dashboard-font-outlier);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: default;
    transition: none;
}

nav.ah-pagination a.ah-pagination__control,
nav.ah-pagination button.ah-pagination__control:not(:disabled) { cursor: pointer; }

nav.ah-pagination .ah-pagination__control i { font-size: 12px; }

@media (hover: hover) {
    nav.ah-pagination a.ah-pagination__control:hover,
    nav.ah-pagination button.ah-pagination__control:hover:not(:disabled),
    nav.ah-pagination .ah-pagination__control.is-hover {
        background: var(--pager-hover);
        border-color: var(--ah-dashboard-color-rule-2);
        color: var(--pager-ink);
    }
}

nav.ah-pagination .ah-pagination__control:focus-visible,
nav.ah-pagination .ah-pagination__control.is-focus {
    /* The legacy theme sets outline: none !important on every link/button. */
    outline: 2px solid var(--pager-focus) !important;
    outline-offset: 2px;
}

nav.ah-pagination a.ah-pagination__control:active,
nav.ah-pagination button.ah-pagination__control:active:not(:disabled),
nav.ah-pagination .ah-pagination__control.is-pressed {
    transform: translateY(1px);
    background: var(--pager-hover);
}

nav.ah-pagination .ah-pagination__control[aria-current="page"] {
    border-color: var(--pager-accent);
    background: var(--pager-accent);
    color: var(--pager-on-accent);
    font-weight: 700;
}

nav.ah-pagination .ah-pagination__control:disabled,
nav.ah-pagination .ah-pagination__control[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    background: var(--pager-surface);
    color: var(--pager-muted);
}

nav.ah-pagination .ah-pagination__ellipsis {
    min-width: 24px;
    padding: 0 4px;
    border-color: transparent;
    background: transparent;
    color: var(--pager-muted);
}

.ah-pagination .ah-pagination__list > .ah-pagination__summary {
    display: none;
    padding: 0 12px;
    color: var(--pager-muted);
    font-size: 12px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* Feedback hooks for async consumers; successful navigation stays quiet. */
nav.ah-pagination[aria-busy="true"] .ah-pagination__list { opacity: .6; cursor: progress; }
nav.ah-pagination[data-state="error"] { outline: 1px solid var(--pager-accent); border-radius: 8px; }
nav.ah-pagination[data-state="success"] .ah-pagination__control[aria-current="page"] { outline: 1px solid var(--pager-accent); outline-offset: 2px; }

@container ah-pagination (max-width: 460px) {
    .ah-pagination .ah-pagination__number,
    .ah-pagination .ah-pagination__numbers { display: none; }
    .ah-pagination .ah-pagination__list > .ah-pagination__summary { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    nav.ah-pagination .ah-pagination__control:active { transform: none; }
}

/* Keep the spot-directory flex footer from collapsing its query container. */
.ah-spots-pagination:has(> .ah-pagination) { width: 100%; }