/* Dépliant — modèle canonique ; son emploi : canon_disclosure.md. */

@layer components {
    .disclosure[data-disclosure-motion] {
        overflow: clip;
    }
    .disclosure-summary {
        display: flex;
        align-items: center;
        justify-content: var(--disclosure-summary-justify, space-between);
        gap: var(--disclosure-space, var(--canon-space-2));
        padding: var(--disclosure-summary-padding, var(--canon-space-2) 0);
    }
    .disclosure-summary::-webkit-details-marker {
        display: none;
    }
    .disclosure-summary::after {
        flex: none;
        order: var(--disclosure-marker-position, 0);
        width: var(--disclosure-marker-size, 0.75em);
        height: calc(var(--disclosure-marker-size, 0.75em) / 2 + var(--disclosure-marker-weight, 2px) * 1.4142);
        margin-inline: var(--disclosure-marker-space, 0 0.25em);
    }
    .disclosure-content {
        padding: var(--disclosure-content-padding, 0 0 var(--canon-space-3));
    }

    .disclosure {
        border-block-end: var(--disclosure-line-width, 0px) solid var(--disclosure-line, var(--canon-theme-line));
    }
    .disclosure-summary::after {
        background-color: var(--disclosure-marker-ink, currentColor);
        clip-path: polygon(0 0, 50% calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 100% 0, 100% calc(var(--disclosure-marker-weight, 2px) * 1.4142), 50% 100%, 0 calc(var(--disclosure-marker-weight, 2px) * 1.4142));
    }
    [open]:not([data-disclosure-motion="close"]) > .disclosure-summary::after {
        clip-path: polygon(0 calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 50% 0, 100% calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 100% 100%, 50% calc(var(--disclosure-marker-weight, 2px) * 1.4142), 0 100%);
    }

    .disclosure-summary {
        list-style: none;
        font-size: var(--disclosure-size,);
        font-style: var(--disclosure-italic, normal);
        font-weight: var(--disclosure-weight, var(--canon-weight-label));
        color: var(--disclosure-ink,);
    }
    .disclosure-summary:hover {
        color: var(--disclosure-ink-hover, var(--disclosure-ink,));
    }
    .disclosure-content {
        font-size: var(--disclosure-content-size,);
    }
    .disclosure-summary::after {
        content: "";
    }

    .disclosure-summary {
        cursor: pointer;
    }
    .disclosure-summary::after {
        transition: clip-path 250ms cubic-bezier(0.37, 0, 0.63, 1);
    }
}

@layer components {
    .disclosure--style-frame {
        border: var(--canon-line-width) solid var(--disclosure-line, var(--canon-theme-line));
        border-radius: var(--disclosure-radius, var(--canon-radius-control));
        background-color: var(--disclosure-surface, var(--canon-theme-raised));
    }
    .disclosure--style-frame > .disclosure-summary {
        border-radius: var(--disclosure-radius, var(--canon-radius-control));
    }
    .disclosure--style-frame > .disclosure-summary:hover {
        background-color: var(--disclosure-summary-surface-hover, transparent);
    }
    .disclosure--style-frame > .disclosure-content {
        border-block-start: var(--canon-line-width) solid var(--disclosure-line, var(--canon-theme-line));
    }
}

@layer components {
    .disclosure--style-nested {
        padding-inline-start: var(--disclosure-nested-indent, var(--canon-space-3));
    }

    .disclosure--style-nested {
        border-inline-start: var(--disclosure-nested-line-width, 2px) solid var(--disclosure-line, var(--canon-theme-line));
    }
}