/* Pages sœurs du fil d'Ariane — module canonique ; son emploi : canon_trail-siblings.md. */

@layer components {
    .trail:has(> .trail-siblings) {
        grid-template-rows: calc(var(--trail-height, 40px) - var(--canon-line-width)) auto;
        height: auto;
    }
    .trail-siblings {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: var(--trail-siblings-justify, normal);
        grid-column: var(--trail-siblings-column, 2);
        min-height: var(--trail-siblings-height, auto);
        margin-inline: calc(-1 * var(--trail-siblings-bleed, 0) * max(var(--trail-edge, 0px), calc((100vw - var(--trail-width, 100vw)) / 2)));
        padding: var(--trail-siblings-padding, var(--canon-space-1) 0 var(--canon-space-2) 25px);
    }
    .trail-sibling + .trail-sibling::before {
        margin-inline: var(--trail-siblings-separator-space, var(--canon-space-2));
    }
    @media (max-width: 800px) {
        .trail-siblings {
            padding-inline-start: 16px;
        }
    }

    .trail-siblings {
        border-block-width: var(--trail-siblings-line-width, medium);
        border-block-style: var(--trail-siblings-line-style, none);
        border-block-color: var(--trail-siblings-line, currentcolor);
        background-color: var(--trail-siblings-surface, transparent);
        backdrop-filter: var(--trail-siblings-blur, none);
    }
    .trail-siblings {
        list-style: none;
        color: var(--trail-siblings-ink,);
    }
    .trail-sibling + .trail-sibling::before {
        content: "·";
        content: var(--trail-siblings-separator, "·" / "");
        text-shadow: none;
        color: var(--trail-siblings-separator-ink, var(--canon-theme-faint));
    }
    .trail-sibling-link {
        text-decoration-line: none;
        color: inherit;
    }
    .trail-sibling-link:hover {
        text-decoration-line: var(--trail-siblings-underline, underline);
        color: var(--trail-siblings-page-ink, var(--canon-theme-ink));
        text-shadow: var(--trail-siblings-shadow, none);
    }
    .trail-sibling[aria-current="page"] {
        font-weight: var(--trail-siblings-page-weight, var(--canon-weight-label));
        color: var(--trail-siblings-page-ink, var(--canon-theme-ink));
        text-shadow: var(--trail-siblings-shadow, none);
    }

    .trail-sibling-link {
        transition: color var(--canon-duration-state);
    }
}

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

@layer components {
    .trail {
        --trail-siblings-column: 1 / -1;
        --trail-siblings-justify: center;
        --trail-siblings-bleed: 1;
        --trail-siblings-height: 36px;
        --trail-siblings-padding: 0 16px;
        --trail-siblings-surface: rgb(0 0 0 / 0.75);
        --trail-siblings-blur: blur(10px);
        --trail-siblings-line: rgb(255 255 255 / 0.9);
        --trail-siblings-line-width: 1px;
        --trail-siblings-line-style: solid;
        --trail-siblings-ink: rgb(255 255 255 / 0.7);
        --trail-siblings-page-ink: rgb(255 255 255 / 0.9);
        --trail-siblings-page-weight: 600;
        --trail-siblings-shadow: 0 0 6px rgb(255 255 255);
        --trail-siblings-underline: none;
        --trail-siblings-separator: "↔" / "";
        --trail-siblings-separator-ink: rgb(255 255 255);
        --trail-siblings-separator-space: 6px;
    }
    .trail:has(.trail-path [data-trail-section="dossiers-acheves"]) {
        --trail-siblings-surface: hsl(224 100% 10% / 0.75);
    }
    .trail:has(.trail-path [data-trail-section="elements-artdesign"]) {
        --trail-siblings-surface: hsl(345 100% 10% / 0.75);
    }
    .trail:has(.trail-path [data-trail-section="etudes"]) {
        --trail-siblings-surface: hsl(180 100% 10% / 0.75);
    }
    .trail:has(.trail-path [data-trail-section="definition-technique"]) {
        --trail-siblings-surface: hsl(276 100% 10% / 0.75);
    }
    .trail:has(.trail-path [data-trail-section="divers"]) {
        --trail-siblings-surface: hsl(4 100% 10% / 0.75);
    }
}