.collapsible {
    position: relative;
}

.toggle {
    display: none;
}

.label {
    position: absolute;
    z-index: 100;
    inset-block-start: 0;
    inset-inline-end: 0;
}

.label::before {
    display: block;
    width: 1em;
    height: 1em;
    border: 1px solid var(--md-ref-palette-neutral-variant80);
    border-radius: 4px;
    content: "-";
    font-size: 0.5em;
    line-height: 1em;
    margin-block-start: 0.5em;
    text-align: center;
}

.content {
    position: relative;
    overflow: hidden;
    max-height: 100vh;
    transition: max-height 0.25s ease-in;
}

.content::after {
    position: absolute;
    height: 3em;
    background: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, var(--color-bg) 100%);
    content: "";
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    transition: height 0.25s ease-in-out;
}

.toggle:checked + .label::before {
    content: "+";
}

.toggle:not(:checked) + .label + .content::after {
    height: 0;
}

.toggle:checked + .label + .content {
    max-height: 5em;
    transition: max-height 0.25s ease-out;
}