@import 'var';
@mixin animated($time: 0.3s) {
  animation-duration: $time;
}

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  transition: $--fade-linear-transition;
}
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
  opacity: 0;
  pointer-events: none;
}

.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  transition: $--fade-linear-transition;
}
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
  opacity: 0;
  pointer-events: none;
}

.el-fade-in-enter-active,
.el-fade-in-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
  opacity: 0;
  pointer-events: none;
}

.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
}

.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $--md-fade-transition;
  transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
  pointer-events: none;
}

.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $--md-fade-transition;
  transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
  pointer-events: none;
}

.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: $--md-fade-transition;
  transform-origin: top left;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
  pointer-events: none;
}

.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}

.el-list-enter-active,
.el-list-leave-active {
  transition: all 1s;
}
.el-list-enter,
.el-list-leave-active {
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
}

.el-opacity-transition {
  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* -- zoom -- */
@keyframes zoom-enter {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
}
.el-zoom-enter-active {
  animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@keyframes zoom-leave {
  to {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
}
.el-zoom-leave-active {
  animation: zoom-leave both;
  @include animated;
}
/* -- slideUp -- */
@keyframes slideUp-enter {
  from {
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
.el-slide-up-enter-active {
  animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@keyframes slideUp-leave {
  to {
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
.el-slide-up-leave-active {
  animation: slideUp-leave both;
  @include animated;
}
/* -- slideDown -- */
@keyframes slideDown-enter {
  from {
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
.el-slide-down-enter-active {
  animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@keyframes slideDown-leave {
  to {
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
.el-slide-down-leave-active {
  animation: slideDown-leave both;
  @include animated;
}
/* -- slideLeft -- */
@keyframes slideLeft-enter {
  from {
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
.el-slide-left-enter-active {
  animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@keyframes slideLeft-leave {
  to {
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
.el-slide-left-leave-active {
  animation: slideLeft-leave both;
  @include animated;
}
/* -- slideRight -- */

@keyframes slideRight-enter {
  from {
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
.el-slide-right-enter-active {
  animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@keyframes slideRight-leave {
  to {
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
.el-slide-right-leave-active {
  animation: slideRight-leave both;
  @include animated;
}