// ---
// -- Animations
// -
@keyframes rotating-animation
  0%
    transform: rotateZ(0deg)
  100%
    transform: rotateZ(360deg)

@keyframes shake-animation
  0%
    transform: translateX(0)
  20%
    transform: translateX(-12px)
  40%
    transform: translateX(12px)
  55%
    transform: translateX(-8px)
  70%
    transform: translateX(6px)
  80%
    transform: translateX(-4px)
  90%
    transform: translateX(2px)
  100%
    transform: translateX(0)

@keyframes err-blink-animation
  0%
    box-shadow: inset 0 0 0 1px var(--status-err)
  20%
    box-shadow: inset 0 0 0 1px var(--status-err)
  100%
    box-shadow: inset 0 0 0 1px #00000016

// ---
// -- Vue transitions
// -
#root .popup-enter-active
#root .popup-leave-active
  transition: opacity var(--d-fast), z-index var(--d-fast)
  .popup
    transition: transform var(--d-fast)
#root .popup-enter-from
  opacity: 0
  z-index: 0
  .popup
    transform: translateY(16px)
#root .popup-enter-to
  opacity: 1
  z-index: 10000
  .popup
    transform: translateY(0)
#root .popup-leave-from
  opacity: 1
  z-index: 10000
  .popup
    transform: translateY(0)
#root .popup-leave-to
  opacity: 0
  z-index: 0
  .popup
    transform: translateY(16px)
