@mixin animation($animation, $duration) {
  -webkit-animation: $animation $duration;
  -moz-animation: $animation $duration;
  -ms-animation: $animation $duration;
  -o-animation: $animation $duration;
  animation: $animation $duration;
}

// KEYFRAMES

// ChatFadeIn
@keyframes ChatFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

// ChatFadeInRight
@keyframes ChatFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

// ChatFadeInLeft
@keyframes ChatFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

// ChatFadeOutLeft
@keyframes ChatFadeOutLeft {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

// ChatFadeInDown
@keyframes ChatFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

// ChatSlideInDown
@keyframes ChatSlideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

// ChatSlideOutDown
@keyframes ChatSlideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

// ChatSlideInUp
@keyframes ChatSlideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

// ChatSlideOutUp
@keyframes ChatSlideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

// ChatSlideOutRight
@keyframes ChatSlideOutRight {
  from {
    right: 0;
  }

  to {
    right: -100%;
  }
}

// ChatSlideInRight
@keyframes ChatSlideInRight {
  from {
    right: -100%;
    visibility: visible;
  }

  to {
    right: 0;
  }
}

// ChatSlideInLeft
@keyframes ChatSlideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

// ChatSlideOutLeft
@keyframes ChatSlideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ChatBounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounce-in {
  animation-name: ChatBounceIn;
  animation-duration: 0.75s;
}

// Bouncing
@keyframes ChatBouncing {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-3px);
  }
}

// ColorPulse
@keyframes colorPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

// Rotate
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

// Dash
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

@keyframes ChatCallAttention {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.call-attention {
  -webkit-animation-name: ChatCallAttention;
  animation-name: ChatCallAttention;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

// ANIMATIONS
.slide-in-up {
  @include animation(ChatSlideInUp, 0.3s);
}

.slide-out-up {
  @include animation(ChatSlideOutUp, 0.2s);
}

.slide-in-down {
  &:not(.ng-hide) {
    @include animation(ChatSlideInDown, 0.2s);
  }

  &.ng-hide {
    display: none;
  }
}

.fade-in {
  &:not(.ng-hide) {
    @include animation(ChatFadeIn, 0.5s);
  }

  &.ng-hide {
    display: none;
  }
}

.fade-in-down {
  &:not(.ng-hide) {
    @include animation(ChatFadeInDown, 0.2s);
  }

  &.ng-hide {
    display: none;
  }
}

.slide-out-down {
  @include animation(ChatSlideOutDown, 0.3s);
}

.slide-out-right {
  @include animation(ChatSlideOutRight, 0.3s);
}

.slide-in-right {
  &:not(.ng-hide) {
    @include animation(ChatFadeInRight, 0.3s);
  }

  &.ng-hide {
    display: none;
  }
}

.slide-in-left {
  &:not(.ng-hide) {
    @include animation(ChatFadeInLeft, 0.3s);
  }

  &.ng-hide {
    display: none;
  }
}

.slide-out-left {
  &:not(.ng-hide) {
    @include animation(ChatSlideOutLeft, 0.3s);
  }

  &.ng-hide {
    display: none;
  }
}

.animate-chat {
  &.ng-enter {
    &.me {
      @include animation(ChatFadeInRight, 0.3s);
    }

    &.user {
      @include animation(ChatFadeInLeft, 0.3s);
    }
  }

  &.ng-leave {
    display: none;
  }
}

.bouncing {
  -webkit-animation: ChatBouncing 0.3s infinite alternate;
  animation: ChatBouncing 0.3s infinite alternate;
}

.bounce-in {
  animation-name: ChatBounceIn;
  animation-duration: .75s;
}

.chat-loading-dots {
  text-align: center;

  span {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 5px;
    margin: 0px;
    opacity: 0.5;
    background: #CCC;
    border-radius: 50%;
  }

  &.animate {
    span {
      opacity: 1;
      background: $status-online;
      animation: ChatBouncing 0.4s infinite alternate;

      &:nth-of-type(2) {
        animation-delay: 0.3s;
      }

      &:nth-of-type(3) {
        animation-delay: 0.6s;
      }
    }
  }
}