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

@layer components {
    .trail {
        --trail-back-width: clamp(150px, 19.3vw, 356px);
        --trail-height: 40px;
    }
    @media (max-width: 800px) {
        .trail {
            --trail-back-width: max-content;
        }
    }

    .trail {
        display: grid;
        grid-template-columns: var(--trail-back-width) minmax(0, 1fr);
        height: var(--trail-height);
    }
    .trail-back {
        display: flex;
        grid-column: 1;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        height: 100%;
        padding: 0 20px;
    }
    .trail-back-icon {
        flex: none;
        width: 16px;
        height: 16px;
    }
    .trail-path {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: stretch;
        height: 100%;
        padding-inline-start: 25px;
        overflow-x: auto;
    }
    .trail-item,
    .trail-link {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .trail-item + .trail-item {
        margin-inline-start: 1.25em;
    }
    .trail-item + .trail-item::before {
        position: absolute;
        inset-inline-end: 100%;
        width: 1.25em;
    }
    .trail-link::after,
    .trail-item[aria-current="page"]::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 4px;
    }
    .trail-path::-webkit-scrollbar {
        display: none;
    }
    @media (max-width: 800px) {
        .trail-back {
            padding: 0 16px;
        }
        .trail-path {
            padding-inline-start: 16px;
        }
    }

    .trail {
        border-block-end: var(--canon-line-width) solid var(--canon-theme-line);
        background-image: linear-gradient(to right, var(--canon-theme-canvas) 0%, var(--canon-theme-canvas) 20%, var(--canon-theme-raised) 100%);
    }
    .trail-back {
        background-color: var(--canon-theme-action);
    }
    .trail-back:hover,
    .trail:has([data-trail-parent]:hover, [data-trail-parent]:focus-visible) .trail-back {
        background-color: var(--canon-theme-action-hover);
    }
    .trail-back:active {
        background-color: var(--canon-theme-action-active);
    }
    .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-link:focus-visible::after,
    .trail:has(.trail-back:hover, .trail-back:focus-visible) [data-trail-parent]::after {
        background-color: var(--canon-theme-action);
    }
    .trail-path {
        scrollbar-width: none;
    }

    .trail {
        font-size: var(--canon-size-control);
        font-weight: var(--canon-weight-label);
        white-space: nowrap;
        color: var(--canon-theme-faint);
    }
    .trail-back {
        text-decoration-line: none;
        color: var(--canon-theme-on-action);
    }
    .trail-link {
        text-decoration-line: none;
        color: var(--canon-theme-muted);
    }
    .trail-link:hover,
    .trail-link:focus-visible,
    .trail:has(.trail-back:hover, .trail-back:focus-visible) [data-trail-parent],
    .trail-item[aria-current="page"] {
        color: var(--canon-theme-ink);
    }
    .trail-item + .trail-item::before {
        font-weight: var(--canon-weight-body);
        text-align: center;
        color: var(--canon-theme-faint);
    }
    .trail-path {
        list-style: none;
    }
    .trail-link::after,
    .trail-item[aria-current="page"]::after {
        content: "";
    }
    .trail-item + .trail-item::before {
        content: "/";
        content: "/" / "";
    }
    .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;
    }
}