/* @link https://utopia.fyi/clamp/calculator?a=600,1920,20-30 */
.list-expandable {
    --_fs: clamp(1.25rem, 0.9659rem + 0.7576vw, 1.875rem);
    --_icon-gap: clamp(1.5rem, 0.4773rem + 2.7273vw, 3.75rem);
    --_icon-size: clamp(1.5rem, 1.2159rem + 0.7576vw, 2.125rem);
}

    .list-expandable summary {
        cursor: pointer;
        font-size: var(--_fs);
        font-weight: 500;
        text-decoration: underline;
        list-style: none;
        display: flex;
        gap: 0 var(--_icon-gap);
    }

        .list-expandable summary::marker,
        .list-expandable summary::-webkit-details-marker {
            display: none;
        }

        .list-expandable summary > svg {
            fill: var(--_icon-fill, currentColor);
            rotate: var(--_icon-rotate, 0deg);
            flex-shrink: 0;
            height: var(--_icon-size);
            width: var(--_icon-size);
            transition: rotate 0.25s ease, fill 0.25s ease;
        }

        .list-expandable summary + div {
            margin-inline-start: calc(var(--_icon-size) + var(--_icon-gap));
        }

.list-expandable__item[open] {
    --_icon-rotate: 45deg;
    --_icon-fill: var(--color-theme-primary);
}

.list-expandable__item::details-content {
    display: block;
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition-property: block-size, content-visibility, opacity;
    transition-duration: 0.45s;
    transition-behavior: allow-discrete;
    transition-timing-function: var(--easing-snappy);
}

.list-expandable__item[open]::details-content {
    block-size: auto;
    block-size: calc-size(auto, size);
    opacity: 1;
}