.overlay-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100vw;
  background: var(--overlay-bg);
  transition-duration: var(--transition-duration);
}

.overlay-up-enter ~ .overlay-bottom,
.overlay-up-leave-to ~ .overlay-bottom {
  height: 0;
}

.overlay-up-enter-active ~ .overlay-bottom,
.overlay-up-leave-active ~ .overlay-bottom {
  height: 100vh;
}

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

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

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