//
// slide-down transition
// css 만으로는 transition 이 동작하지 않고, SlideDownTransition 컴포넌트를 사용해야 함.
//
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.2s ease-out;
}

.slide-down-enter-to,
.slide-down-leave-from {
  overflow: hidden;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

//
// notification transition
//
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease-out;
}

.notification-enter-to,
.notification-leave-from {
  margin-top: 0;
}

.notification-enter-from {
  margin-top: -35px;
  opacity: 0;
}

.notification-leave-to {
  opacity: 0;
}

//
// alarm transition
//
.alarm-enter-active,
.alarm-leave-active {
  transition: all 0.3s ease-out;
  z-index: -1;
}

.alarm-enter-to,
.alarm-leave-from {
  margin-top: 0;
}

.alarm-enter-from,
.alarm-leave-to {
  margin-bottom: -230px;
  opacity: 0;
}

//
// modal Transition
//
//.modal-enter-active,
//.modal-leave-active {
//  transition: all 0.3s ease-out;
//}
//
//.modal-enter-from,
//.modal-leave-to {
//  opacity: 0.4;
//}


//
// fade TransitionGroup
//
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01);
}

.fade-enter-active,
.fade-leave-active {
  position: absolute;
}

//
// spin animation
//
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}