.overlay-up-down-enter ~ .overlay-bottom,
.overlay-up-down-enter ~ .overlay-top {
  height: 0;
}

.overlay-up-down-leave-active ~ .overlay-bottom,
.overlay-up-down-leave-to ~ .overlay-bottom,
.overlay-up-down-leave-to ~ .overlay-top,
.overlay-up-down-leave-to ~ .overlay-top {
  height: 51vh;
}

.overlay-up-down-enter-active ~ .overlay-bottom,
.overlay-up-down-enter-active ~ .overlay-top {
  transition-timing-function: ease;
}

.overlay-up-down-leave-active ~ .overlay-bottom,
.overlay-up-down-leave-active ~ .overlay-top {
  transition-timing-function: ease;
}

.overlay-up-down-enter-active,
.overlay-up-down-leave-active {
  transition-duration: var(--transition-duration);
}