dialog.bottom-slide-out {
  animation: 0.4s var(--ease-in-out) slide-out-to-bottom forwards;
  transform: 0;

  &.open {
    animation: 0.4s var(--ease-in-out) slide-in-from-bottom forwards;
    transform: translateX(-100%);

    &::backdrop {
      opacity: 1;
    }
  }

  &::backdrop {
    opacity: 0;
    transition: opacity 0.4s var(--ease-in-out);
  }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes slide-out-to-bottom {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}