.file-upload {
    margin-bottom: .25em;
    padding-top: 1em;
    padding-bottom: 1em;
    height: auto;
}

.file-upload input[type=file] {
    visibility: hidden;
    height: 0;
    width: 0;
}

.file-upload-image {
    max-width: 200px;
    max-height: 200px;
    display: block;
}

.file-upload-image:not([src='']) {
    margin-bottom: .5em;
}

.file-upload .files {
    color: #333;
    margin-top: 0;
    margin-bottom: .25em;
}

details {
    padding: 1em;
    background: #F2F2F2;
    box-shadow: inset 0 0 0 2px #E7E7E7;
    margin-bottom: .5em;
    --collapse-speed: .3s;
    overflow: hidden;
}

@media not (prefers-reduced-motion) {
    details {
        height: var(--collapsed);
        transition: height var(--collapse-speed) cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    details[open]:not([data-closing="true"]) {
        height: var(--expanded);
    }
}

details summary {
    background: #aaa;
    color: #fff;
    padding: .75em;
    padding-right: 2.5em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: -1em;
    cursor: pointer;
    position: relative;
    transition: background .25s ease;
}

details summary::after {
    content: '';
    width: 1em;
    height: 1em;
    position: absolute;
    right: 0;
    transition: transform .25s ease;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translate(-.75em,-.25em) rotate(45deg);
}

details > :not(summary) {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

details[open]:not([data-closing="true"]) > :not(summary) {
    opacity: 1;
}

details[open]:not([data-closing="true"]) summary::after {
    transform: translate(-.75em,.25em) rotate(45deg) scale(-1);
}

details summary + * {
    margin-top: 2em;
}