/* Pagination — modèle canonique ; son emploi : canon_pagination.md. */

@layer components {
    .pagination {
        display: flex;
        justify-content: center;
    }
    .pagination-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--pagination-space, var(--canon-space-2));
        margin: 0;
        padding: 0;
    }
    .pagination-item,
    .pagination-previous,
    .pagination-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--pagination-width, var(--pagination-size, var(--canon-size-icon-target)));
        min-height: var(--pagination-height, var(--pagination-size, var(--canon-size-icon-target)));
        padding: 0 var(--canon-space-2);
    }

    .pagination-item,
    .pagination-previous,
    .pagination-next {
        border: var(--pagination-line-width, var(--canon-line-width)) solid transparent;
        border-radius: var(--pagination-radius, var(--canon-radius-control));
        background-color: var(--pagination-surface, var(--canon-theme-surface));
    }
    .pagination-previous,
    .pagination-next {
        background-color: var(--pagination-step-surface, var(--pagination-surface, var(--canon-theme-surface)));
    }
    .pagination-item:any-link:hover,
    .pagination-previous:any-link:hover,
    .pagination-next:any-link:hover {
        border-color: var(--pagination-hover-line, var(--canon-theme-line-hover));
        background-color: var(--pagination-hover-surface, var(--canon-theme-highlight));
        box-shadow: var(--pagination-hover-shadow, none);
    }
    .pagination-item[aria-current="page"] {
        border-color: var(--pagination-current, var(--canon-theme-action));
        background-color: var(--pagination-current, var(--canon-theme-action));
    }

    .pagination-list {
        list-style: none;
    }
    .pagination-item,
    .pagination-previous,
    .pagination-next {
        font-size: var(--canon-size-body);
        font-weight: var(--pagination-weight, var(--canon-weight-body));
        font-variant-numeric: tabular-nums;
        text-decoration-line: none;
        color: var(--pagination-ink, currentColor);
    }
    .pagination-previous,
    .pagination-next {
        font-weight: var(--pagination-step-weight, var(--pagination-weight, var(--canon-weight-body)));
    }
    .pagination-item:any-link:hover {
        font-weight: var(--pagination-hover-weight, var(--pagination-weight, var(--canon-weight-body)));
        color: var(--pagination-hover-ink, var(--pagination-ink, currentColor));
    }
    .pagination-item[aria-current="page"] {
        font-weight: var(--pagination-current-weight, var(--pagination-weight, var(--canon-weight-body)));
        color: var(--canon-theme-on-action);
    }
    .pagination-previous[aria-disabled="true"],
    .pagination-next[aria-disabled="true"] {
        color: var(--canon-theme-disabled);
    }
    .pagination-ellipsis,
    .pagination-divider {
        color: var(--pagination-muted, var(--canon-theme-muted));
    }

    .pagination-item,
    .pagination-previous,
    .pagination-next {
        transition: border-color var(--canon-duration-state), background-color var(--canon-duration-state);
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .listing-pages {
        --pagination-width: 56px;
        --pagination-height: 24px;
        --pagination-space: 8px;
        --pagination-radius: 7px;
        --pagination-line-width: 2px;
        --pagination-weight: 500;
        --pagination-step-weight: 600;
        --pagination-hover-weight: 900;
        --pagination-current-weight: 900;
        --pagination-hover-shadow: 0 0 9px var(--raw-color-white-90);
        --pagination-surface: var(--raw-color-pearl-2);
        --pagination-step-surface: transparent;
        --pagination-hover-surface: var(--raw-color-pearl-1);
        --pagination-hover-line: var(--raw-color-white-90);
        --pagination-current: var(--local-color-identity-action);
        --pagination-ink: var(--raw-color-black-70);
        --pagination-hover-ink: var(--raw-color-black-80);
        --pagination-muted: var(--raw-color-black-50);
    }
    @media (max-width: 800px) {
        .listing-pages {
            --pagination-width: 36px;
            --pagination-space: 6px;
        }
    }
}