.foldable-anim--scale-in {
  animation: foldable-scale-in 0ms ease-out forwards
}
.foldable-anim--scale-out {
  animation: foldable-scale-out 0ms ease-out forwards
}
@keyframes foldable-scale-in {
  0% {
    transform: translateY(-20%) scale(.9)
  }
  to {
    transform: translateY(0) scale(1)
  }
}
@keyframes foldable-scale-out {
  0% {
    transform: translateY(0) scale(1)
  }
  to {
    transform: translateY(-20%) scale(.9)
  }
}
.foldable-anim--shrink-in {
  animation: foldable-shrink-in 0ms ease-out forwards
}
.foldable-anim--shrink-out {
  animation: foldable-shrink-out 0ms ease-out forwards
}
@keyframes foldable-shrink-in {
  0% {
    transform: translateY(-20%) scale(1.2)
  }
  to {
    transform: translateY(0) scale(1)
  }
}
@keyframes foldable-shrink-out {
  0% {
    transform: translateY(0) scale(1)
  }
  to {
    transform: translateY(-20%) scale(1.2)
  }
}
.foldable-anim--slide-in {
  animation: foldable-slide-in 0ms ease-out forwards
}
.foldable-anim--slide-out {
  animation: foldable-slide-out 0ms ease-out forwards
}
@keyframes foldable-slide-in {
  0% {
    transform: translateY(-15%)
  }
  to {
    transform: translateY(0)
  }
}
@keyframes foldable-slide-out {
  0% {
    transform: translateY(0)
  }
  to {
    transform: translateY(-15%)
  }
}
.foldable-anim--horizontal-slide-in {
  animation: foldable-horizontal-slide-in 0ms ease-out forwards
}
.foldable-anim--horizontal-slide-out {
  animation: foldable-horizontal-slide-out 0ms ease-out forwards
}
@keyframes foldable-horizontal-slide-in {
  0% {
    transform: translateX(-10%)
  }
  to {
    transform: translateX(0)
  }
}
@keyframes foldable-horizontal-slide-out {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-10%)
  }
}
.foldable-anim--fold-in {
  animation: foldable-fold-in 0ms ease forwards;
  transform-origin: top
}
.foldable-anim--fold-out {
  animation: foldable-fold-out 0ms ease forwards;
  transform-origin: top
}
@keyframes foldable-fold-in {
  0% {
    transform: rotateX(-90deg)
  }
  to {
    transform: rotateX(0deg)
  }
}
@keyframes foldable-fold-out {
  0% {
    transform: rotateX(0deg)
  }
  to {
    transform: rotateX(-90deg)
  }
}
.foldable-anim--opacity-in {
  animation: foldable-opacity-in 0ms ease forwards .4s;
  opacity: 0
}
.foldable-anim--opacity-out {
  animation: foldable-opacity-out .3s ease forwards .4s
}
@keyframes foldable-opacity-in {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes foldable-opacity-out {
  0% {
    opacity: 1
  }
  80% {
    opacity: 0
  }
}