// 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%;
  }

  [data-filerobot-floaty="true"] & {
    --translateX: -50%;
    --translateY-shown: -50%;
    --translateY-hidden: -160%;
    position: fixed;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    max-height: 1150px;
    left: 50%;
    top: 50%;;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(146, 166, 188, 0.32);

    @media (max-width: 1480px) {
      width: calc(100% - 80px);
    }

    @media (max-height: 1180px) {
      height: calc(100% - 80px);
    }

    @media (max-width: 1080px) {
      width: 100%;
      height: 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);
}