/*
 * Enhance alle <detail>-Tags.
 *
 * Grundidee: https://stackoverflow.com/questions/69958043/animate-a-details-tag-when-closing
 *
 * Noch mal deutlich(!) verbessert durch HS.
 *
 */

details
{
    --enhance-transition-delay: 0ms; /* muss in ms */
    --enhance-transition-duration: 500ms; /* muss in ms */
}

summary
{
    cursor: pointer;
}

details.enhance-details > div.enhance-details-content-outer
{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--enhance-transition-duration);
}

details.enhance-details-expanded > div.enhance-details-content-outer
{
    grid-template-rows: 1fr;
}

details.enhance-details > div.enhance-details-content-outer > div.enhance-details-content-inner
{
    overflow-y: hidden;
}

details.enhance-details-init > div.enhance-details-content-outer
{
    transition: none !important;
}

details.enhance-details > summary.enhance-summary
{
    list-style-type: none;
}

details.enhance-details > summary.enhance-summary::marker,
details.enhance-details > summary.enhance-summary::-webkit-details-marker
{
    display: none;
}

details.enhance-details > summary.enhance-summary > span.enhance-summary-marker
{
    align-items: center;
    color: inherit;
    display: inline-block;
    font-size: 1em;
    margin-right: 0.3em;
    overflow: visible;
    text-align: center;
    transition: transform var(--enhance-transition-duration);
}

details.enhance-details > summary.enhance-summary > span.enhance-summary-marker:before
{
    content: '▶';
}

details.enhance-details-expanded > summary.enhance-summary > span.enhance-summary-marker
{
    transform: rotate(90deg);
}