.popup-bar:not(.popup-bar--duration) .popup-bar__inner {
  animation: popup-bar--popup 1s ease-out forwards;
}

.popup-bar--duration .popup-bar__inner {
  animation:
    popup-bar--start 1s ease-in forwards,
    popup-bar--stay var(--duration) linear 1s forwards,
    popup-bar--end 1s ease-in forwards calc(var(--duration) + 1s);
}

/* Default */
@keyframes popup-bar--popup {
  from { max-height: 0; }
  to   { max-height: 100vh; }
}

/* Open */
@keyframes popup-bar--start {
  from { max-height: 0; }
  to   { max-height: 100vh; }
}

/* Stay */
@keyframes popup-bar--stay {
  from { max-height: 100vh; }
  to   { max-height: 100vh; }
}

/* Close */
@keyframes popup-bar--end {
  from { max-height: 100vh; }
  to   { max-height: 0; }
}