Checkboxes facet – Animate/transition the extra choices when clicking See more / See less – CSS only

/* 
This transitions the height and opacity of the .facetwp-overflow div in a Checkboxes facet, on clicking 'See more' or 'See less'.
This div contains the extra choices that are hidden by default when the 'Soft limit' setting is set, and becomes visible when clicking 'See more'.
This CSS transitions the div's height and opacity. The max-height in line 10 needs to be a fixed value not too much above the actual height
when the extra choices are visible. 
*/


.facetwp-overflow {
    opacity: 1;
    max-height: 150px; /* this height needs to be more than the facetwp-overflow div's actual height. The closer it is to the actual height, the smoother the transition. */
    transition: all .2s ease-out;
}

.facetwp-overflow.facetwp-hidden {
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    display: block;
    transition: all .2s ease-out;
}