/* Liste de liens — modèle canonique ; son emploi : canon_links.md. */

@layer components {
    .links {
        columns: var(--links-columns, 1);
        column-gap: var(--canon-space-10);
    }
    .links-item {
        break-inside: avoid;
    }
    .links-item + .links-item {
        margin-block-start: var(--links-space, var(--canon-space-2));
    }
    .links-item:not(:last-child) {
        padding-block-end: var(--links-separator-space, 0px);
    }
    .links-item > .links {
        margin-block-start: var(--links-space, var(--canon-space-2));
        padding-inline-start: var(--links-indent, var(--canon-space-5));
    }
    @media (max-width: 800px) {
        .links {
            columns: 1;
        }
    }

    .links-item:not(:last-child) {
        border-block-end: var(--links-separator-width, var(--canon-line-width)) solid var(--links-separator, transparent);
    }

    .links {
        list-style: none;
    }
    .links-item > [aria-current="page"] {
        font-weight: var(--links-weight-current, var(--canon-weight-title));
        text-decoration-line: none;
    }
    .links-note {
        font-size: var(--links-note-size, var(--canon-size-note));
        color: var(--links-note-ink, var(--canon-theme-muted));
    }
}

@layer components {
    .links--layout-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--links-space, var(--canon-space-2)) var(--links-row-space, var(--canon-space-4));
    }
    .links--layout-row > .links-item + .links-item {
        margin-block-start: 0;
    }
}

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

@layer tokens {
    .links {
        --links-separator-width: 0px;
    }
    .part > .links {
        --links-columns: 2;
    }
    .links .links {
        --links-columns: 1;
    }
}