/* Fil d'Ariane — modèle canonique ; son emploi : canon_trail.md. */

@layer components {
    .trail {
        position: var(--trail-position, static);
        inset-block-start: var(--trail-top, auto);
        z-index: var(--trail-elevation, auto);
        display: grid;
        grid-template-columns: var(--trail-back-width, clamp(150px, 19.3vw, 356px)) minmax(0, 1fr);
        height: var(--trail-height, 40px);
        padding-inline: max(var(--trail-edge, 0px), calc((100vw - var(--trail-width, 100vw)) / 2));
    }
    .trail-back {
        display: flex;
        grid-column: 1;
        align-items: center;
        justify-content: flex-end;
        gap: var(--trail-back-icon-space, 10px);
        height: 100%;
        padding: var(--trail-back-padding, 0 20px);
    }
    .trail-back:not([href]) {
        display: var(--trail-back-idle-display, none);
    }
    .trail-back-icon {
        flex: none;
        width: var(--trail-back-icon-size, 16px);
        height: var(--trail-back-icon-size, 16px);
    }
    .trail-path {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: stretch;
        height: 100%;
        padding-inline-start: var(--trail-path-start, 25px);
        overflow-x: auto;
    }
    .trail-path::before {
        align-self: center;
        margin-inline-end: var(--trail-back-separator-space, 0px);
    }
    .trail-item,
    .trail-link {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .trail-item + .trail-item {
        margin-inline-start: var(--trail-separator-space, 1.25em);
    }
    .trail-item + .trail-item::before {
        position: absolute;
        inset-inline-end: 100%;
        width: var(--trail-separator-space, 1.25em);
    }
    .trail-link::after,
    .trail-item[aria-current="page"]::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--trail-underline-height, 4px);
    }
    .trail-path::-webkit-scrollbar {
        display: none;
    }
    @media (max-width: 800px) {
        .trail {
            grid-template-columns: var(--trail-back-width, max-content) minmax(0, 1fr);
        }
        .trail-back {
            padding: var(--trail-back-padding, 0 16px);
        }
        .trail-path {
            padding-inline-start: var(--trail-path-start, 16px);
        }
    }

    .trail {
        border-block-end: var(--canon-line-width) solid var(--trail-line, var(--canon-theme-line));
        background-image: linear-gradient(to right, var(--trail-surface-start, var(--canon-theme-canvas)) 0%, var(--trail-surface-start, var(--canon-theme-canvas)) 20%, var(--trail-surface-end, var(--canon-theme-raised)) 100%);
        background-size: auto var(--trail-surface-height, auto);
        background-repeat: var(--trail-surface-repeat, repeat);
        backdrop-filter: var(--trail-blur, none);
    }
    .trail-back {
        background-color: var(--trail-back-surface, var(--canon-theme-action));
    }
    .trail-back:not([href]) {
        opacity: var(--trail-back-idle-opacity, 1);
    }
    .trail-back:hover,
    .trail:has([data-trail-parent]:hover) .trail-back {
        background-color: var(--trail-back-surface-hover, var(--canon-theme-action-hover));
    }
    .trail-back:active {
        background-color: var(--trail-back-surface-active, var(--canon-theme-action-active));
    }
    .trail-back-icon {
        background-color: currentColor;
        mask: var(--trail-back-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6.2v11.6a1 1 0 0 1-1.55.83L5.6 12.83a1 1 0 0 1 0-1.66l8.85-5.8A1 1 0 0 1 16 6.2Z'/%3E%3Cpath d='M19.9 5.8v12.4'/%3E%3C/svg%3E")) center / contain no-repeat;
    }
    .trail-link::after {
        background-color: color-mix(in srgb, var(--canon-theme-action) 30%, transparent);
    }
    .trail-item[aria-current="page"]::after,
    .trail-link:hover::after,
    .trail:has(.trail-back:hover) [data-trail-parent]::after {
        background-color: var(--canon-theme-action);
    }
    .trail-path {
        scrollbar-width: none;
    }

    .trail {
        font-size: var(--trail-size, var(--canon-size-control));
        font-weight: var(--trail-weight, var(--canon-weight-label));
        white-space: nowrap;
        color: var(--trail-ink, var(--canon-theme-faint));
    }
    .trail-back {
        font-size: var(--trail-back-size, 1em);
        font-weight: var(--trail-back-weight,);
        letter-spacing: var(--trail-back-tracking,);
        text-decoration-line: none;
        text-transform: var(--trail-back-case,);
        color: var(--trail-back-ink, var(--canon-theme-on-action));
    }
    .trail-back:hover {
        color: var(--trail-back-ink-hover, var(--canon-theme-on-action));
        text-shadow: var(--trail-shadow, none);
    }
    .trail-link {
        text-decoration-line: none;
        color: var(--trail-link-ink, var(--canon-theme-muted));
    }
    .trail-link:hover,
    .trail:has(.trail-back:hover) [data-trail-parent] {
        color: var(--trail-link-ink-hover, var(--canon-theme-ink));
        text-shadow: var(--trail-shadow, none);
    }
    .trail-item[aria-current="page"] {
        font-weight: var(--trail-page-weight,);
        color: var(--trail-page-ink, var(--canon-theme-ink));
        text-shadow: var(--trail-shadow, none);
    }
    .trail-path::before,
    .trail-item + .trail-item::before {
        font-weight: var(--trail-separator-weight, var(--canon-weight-body));
        text-align: center;
        text-shadow: none;
        color: var(--trail-separator-ink, var(--canon-theme-faint));
    }
    .trail-path {
        list-style: none;
    }
    .trail-path::before {
        content: var(--trail-back-separator, none);
    }
    .trail-link::after,
    .trail-item[aria-current="page"]::after {
        content: "";
    }
    .trail-item + .trail-item::before {
        content: "/";
        content: var(--trail-separator, "/" / "");
    }
    .trail-leaf::before {
        content: "\a0: ";
    }

    .trail-back,
    .trail-link,
    .trail-link::after {
        transition: background-color var(--canon-duration-state), color var(--canon-duration-state);
    }
    .trail-back {
        user-select: none;
    }
    .trail-back:not([href]) {
        pointer-events: none;
    }
}