//
// Animation
// --------------------------------------------------

@keyframes animation-color {
  0% {
    color: $brand-success;
  }

  20% {
    color: $brand-info;
  }

  40% {
    color: $brand-warning;
  }

  60% {
    color: $brand-primary;
  }

  80% {
    color: $brand-info;
  }

  100% {
    color: $brand-success;
  }
}

@-webkit-keyframes animation-color {
  0% {
    color: $brand-success;
  }

  20% {
    color: $brand-info;
  }

  40% {
    color: $brand-warning;
  }

  60% {
    color: $brand-primary;
  }

  80% {
    color: $brand-info;
  }

  100% {
    color: $brand-success;
  }
}

.animation-color {
  @include animation(animation-color 4s infinite);
}

@keyframes animation-color-border {
  0% {
    border-color: $brand-success;
  }

  20% {
    border-color: $brand-info;
  }

  40% {
    border-color: $brand-warning;
  }

  60% {
    border-color: $brand-primary;
  }

  80% {
    border-color: $brand-info;
  }

  100% {
    border-color: $brand-success;
  }
}

@-webkit-keyframes animation-color-border {
  0% {
    border-color: $brand-success;
  }

  20% {
    border-color: $brand-info;
  }

  40% {
    border-color: $brand-warning;
  }

  60% {
    border-color: $brand-primary;
  }

  80% {
    border-color: $brand-info;
  }

  100% {
    border-color: $brand-success;
  }
}

.animation-color-border {
  border: dotted 3px;

  @include animation(animation-color-border 4s infinite);
}

@keyframes animation-online {
  0% {
    color: $color-grey-1;
  }

  25% {
    color: $brand-success;
  }

  50% {
    color: $color-grey-1;
  }

  75% {
    color: $brand-success;
  }

  100% {
    color: $color-grey-1;
  }
}

@-webkit-keyframes animation-online {
  0% {
    color: $color-grey-1;
  }

  25% {
    color: $brand-success;
  }

  50% {
    color: $color-grey-1;
  }

  75% {
    color: $brand-success;
  }

  100% {
    color: $color-grey-1;
  }
}

.animation-online {
  @include animation(animation-online 4s infinite);
}

@-webkit-keyframes rotate-180-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes rotate-180-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.animation-rotate {
  @include animation(
    rotate-180-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
  );
}