@import '../mixins/motion';

$standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
$decelerated-easing: map-get(map-get($easing, 'ease-out'), 'basic');
$accelerated-easing: map-get(map-get($easing, 'ease-in'), 'basic');

$accent-easting: map-get(map-get($easing, 'ease-in-out'), 'accent');

$standard-duration: $cds-duration-fast + ms;
$accent-duration: $cds-duration-normal + ms;

@mixin transition-default() {
  &-enter-active {
    transition-duration: $standard-duration !important;
    transition-timing-function: $standard-easing !important;
  }

  &-leave-active {
    transition-duration: $standard-duration !important;
    transition-timing-function: $standard-easing !important;
  }

  &-move {
    transition-duration: 0.5s !important;
    transition-property: transform !important;
    transition-timing-function: $standard-easing !important;
  }
}

@mixin transition-minimal() {
  &-enter-active {
    transition: $standard-duration $standard-easing;
  }

  &-leave-active {
    transition: $standard-duration $standard-easing;
  }

  &-move {
    transition: transform .5s $standard-easing;
  }
}

@mixin fade-out() {
  &-leave-to {
    opacity: 0;
  }
  &-leave-active {
    transition-duration: 100ms !important;
  }
}

// Generic transitions
.fade-transition {
  @include transition-default();

  &-enter-from, &-leave-to {
    opacity: 0 !important;
  }

  &-enter-active,
  &-leave-active {
    transition-property: opacity !important;
  }
}

.fade-transition-minimal {
  @include transition-minimal();

  &-leave-active {
    position: absolute;
  }

  &-enter-from, &-leave-to {
    opacity: 0 !important;
  }
}

.expand-transition {
  @include transition-default();
}

.expand-transition-x {
  @include transition-default();
}

.slide-transition-y {
  @include transition-default();

  &-enter-from, &-leave-to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.slide-transition-x {
  @include transition-default();

  &-enter-from, &-leave-to {
    opacity: 0;
    transform: translateX(-15px);
  }
}

.slide-transition-right {
  &-enter-active,
  &-leave-active {
    transition: transform $accent-duration $accent-easting;
  }

  &-leave-active {
    position: absolute;
  }

  &-enter-from {
    transform: translate3d(-100%, 0, 0);
  }
  &-leave-to {
    transform: translate3d(100%, 0, 0);
  }
}

.slide-transition-left {
  &-enter-active,
  &-leave-active {
    transition: transform $accent-duration $accent-easting;
  }

  &-leave-active {
    position: absolute;
  }

  &-enter-from {
    transform: translate3d(100%, 0, 0);
  }
  &-leave-to {
    transform: translate3d(-100%, 0, 0);
  }
}

.jump-transition {
  &-left, &-right {
    &-enter-active,
    &-leave-active {
      transition: opacity $accent-duration, transform $accent-duration;
    }

    &-enter-from,
    &-leave-to {
      opacity: 0
    }

    &-leave-active {
      position: absolute;
    }
  }

  &-right {
    &-enter-from {
      transform: translate3d(-15px, 0, 0);
    }
    &-leave-to {
      transform: translate3d(15px, 0, 0);
    }
  }

  &-left {
    &-enter-from {
      transform: translate3d(15px, 0, 0);
    }
    &-leave-to {
      transform: translate3d(-15px, 0, 0);
    }
  }
}

.scale-transition {
  @include transition-default();
  @include fade-out();

  &-enter-from {
    opacity: 0;
    transform: scale(0);
  }

  &-enter-active,
  &-leave-active {
    transition-property: transform, opacity !important;
  }
}

.modal-transition,
.modal-transition-bottom,
.modal-transition-top {
  &-enter-active {
    transition-duration: 225ms !important;
    transition-timing-function: $decelerated-easing !important;
  }

  &-leave-active {
    transition-duration: 125ms !important;
    transition-timing-function: $accelerated-easing !important;
  }

  &-enter-active,
  &-leave-active {
    transition-property: transform, opacity !important;
    pointer-events: none;
  }
}

.modal-transition {
  &-enter-from, &-leave-to {
    transform: scale(0.9);
    opacity: 0;
  }

  &-enter-to, &-leave-from {
    opacity: 1;
  }
}

.modal-transition-bottom {
  &-enter-from, &-leave-to {
    transform: translateY(calc(50vh + 50%));
  }
}

.modal-transition-top {
  &-enter-from, &-leave-to {
    transform: translateY(calc(-50vh - 50%));
  }
}

.notification-transition {
  &-enter-active,
  &-leave-active {
    transition-duration: $standard-duration;
    transition-timing-function: $decelerated-easing;
  }

  &-enter-active {
    transition-property: transform, opacity;
  }

  &-enter-from {
    opacity: 0;
    transform: scale(.8);
  }

  &-leave-action {
    transition-property: opacity;
  }

  &-leave-to {
    opacity: 0;
  }
}
