$zoom-in-top-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;

:root {
    --zoom-in-top-transition: #{$zoom-in-top-transition};
}

.zoom-in-top-transition-enter-active,
.zoom-in-top-transition-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: var(--zoom-in-top-transition);
    transform-origin: center top;
}

.zoom-in-top-transition-enter-from,
.zoom-in-top-transition-leave-active {
    opacity: 0;
    transform: scaleY(0);
}