/* Suite en ligne — modèle canonique ; son emploi : canon_unfold.md. */

@layer components {
    .unfold,
    .unfold-trigger,
    .unfold-content,
    [data-unfold-phrase] {
        display: inline;
    }
    .unfold-trigger {
        margin: 0;
        padding: 0 2px;
    }
    .unfold-content {
        margin: 0 4px;
    }

    .unfold {
        background-color: var(--unfold-surface, var(--canon-theme-highlight));
    }
    .unfold:hover {
        background-color: var(--unfold-surface-hover, var(--unfold-surface, var(--canon-theme-highlight)));
    }
    .unfold-trigger {
        border: 0;
        border-block-end: 1px dotted transparent;
        background: transparent;
    }
    .unfold-trigger:hover {
        border-block-end-color: currentColor;
    }

    .unfold-trigger {
        font: inherit;
        font-style: var(--unfold-italic, normal);
        color: inherit;
    }
    .unfold-trigger::after {
        content: " [...]";
        font-size: 0.9em;
        font-style: normal;
        letter-spacing: 0.05em;
    }
    .unfold-trigger[aria-expanded="true"]::after {
        content: ", ";
    }
    .unfold-content {
        font-style: var(--unfold-italic, normal);
    }

    .unfold-trigger {
        cursor: pointer;
        user-select: none;
        transition: border-block-end-color var(--canon-duration-state);
    }
    [data-unfold-phrase] {
        animation: unfold-in var(--canon-duration-reveal) ease-out both;
    }
    [data-unfold-phrase="fading"] {
        animation: unfold-out var(--canon-duration-reveal) ease-in both;
    }
    @media (prefers-reduced-motion: reduce) {
        [data-unfold-phrase],
        [data-unfold-phrase="fading"] {
            animation: none;
        }
    }
    @keyframes unfold-in {
        from {
            opacity: 0;
        }
    }
    @keyframes unfold-out {
        to {
            opacity: 0;
        }
    }
}

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

@layer components {
    .unfold {
        --unfold-surface: rgb(255 255 0 / 0.2);
        --unfold-surface-hover: rgb(255 255 0 / 0.3);
        --unfold-italic: italic;
    }
}