// usages in a few files
// ==================================================================
// ======================== TransitionWrapper =======================
// ==================================================================
.filerobot-TransitionWrapper {
  --translateX: 0;
  --translateY-shown: 0;
  --translateY-hidden: -105%;
  display: none;
  position: absolute;
  top: 0;
  background: $white;
  overflow-y: hidden;

  &.--applied {
    display: block;
    z-index: $zIndex-2;
    height: 100%;
    width: 100%;
  }
}

// ==================================================================
// =========================== Transitions ==========================
// ==================================================================

// Slide down/up transition

.filerobot-transition-slideDownUp-enter {
  opacity: 0.01;
  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.filerobot-transition-slideDownUp-enter.filerobot-transition-slideDownUp-enter-active {
  opacity: 1;
  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
}

.filerobot-transition-slideDownUp-leave {
  opacity: 1;
  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.filerobot-transition-slideDownUp-leave.filerobot-transition-slideDownUp-leave-active {
  opacity: 0.01;
  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
}