// ng-animate

@mixin bc-ng-animate($class, $attr, $initial, $active, $important:'') {
  // non-active
  opacity: 1;
  #{$attr}: auto;
  #{$attr}: initial;
  @include transition(#{$attr} $fast, opacity $slow !important);
  &.#{$class} {
    opacity: 1;
    #{$attr}: auto;
    #{$attr}: initial;
  }
  // add active class
  &.#{$class}-add {
    opacity: 0;
    #{$attr}: #{$initial};
    @include transition(#{$attr} $fast, 0s !important);
  }
  &.#{$class}-add-active {
    #{$attr}: #{$active};
  }
  // remove active class
  &.#{$class}-remove {
    opacity: 0;
    #{$attr}: #{$active};
    @include transition(#{$attr} $fast, 0s !important);
  }
  &.#{$class}-remove-active {
    #{$attr}: #{$initial};
  }
  @if $important == '!important' {
    &.#{$class} {
      opacity: 1 !important;
      @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
        -webkit-transition: #{$attr} 0s, opacity 0s !important;
        -o-transition: #{$attr} 0s, opacity 0s !important;
        transition: #{$attr} 0s, opacity 0s !important;
        #{$attr}: #{$active} !important;
        #{$attr}: #{$active} !important;
        opacity: 1 !important;
      }
    }
  } @else {
    @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
      -webkit-transition: #{$attr} 0s, opacity 0s !important;
      -o-transition: #{$attr} 0s, opacity 0s !important;
      transition: #{$attr} 0s, opacity 0s !important;
      #{$attr}: initial !important;
      #{$attr}: auto !important;
      opacity: 1 !important;
    }
  }
}

//modal collapse and come back

@-webkit-keyframes scale {
  10% { -webkit-transform: scale(.9); }
  30% { -webkit-transform: scale(.8); }
  50% { -webkit-transform: scale(.65); }
  70% { -webkit-transform: scale(.8); }
  90% { -webkit-transform: scale(.9); }
  100% { -webkit-transform: scale(1); }
}
@keyframes scale {
  10% { transform: scale(.9); }
  30% { transform: scale(.8); }
  50% { transform: scale(.65); }
  70% { transform: scale(.8); }
  90% { transform: scale(.9); }
  100% { transform: scale(1); }
}

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

.scale {
  animation: scale .4s;
}

.rotating {
  img {
    animation: rotate .5s linear;
  }
}

// Yellow flash
.flash {
  animation-name: flash;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-timing-function: ease-out;
}

@keyframes flash {
  0% { background-color: inherit; }
  50% { background-color: $moccasin; }
  100% { background-color: inherit; }
}


// Slide up to exit

@keyframes slide-in {
  20% { opacity: 0; }
  100% { height: 8em; opacity: 1; }
}

@keyframes slide-out {
  80% { opacity: 0; }
  100% { height: 0em; opacity: 0; }
}

.slide-up-outer {
  position: relative;
  overflow: hidden;
  animation-delay: 1s;
  animation-duration: $slow;
  animation-fill-mode: forwards;
  &.slide-in {
    height: 0em;
    opacity: 0;
    animation-name: slide-in;
  }
  &.slide-out {
    height: 8em;
    opacity: 1;
    animation-name: slide-out;
  }
}

.slide-up-inner {
  position: absolute;
  bottom: 0px;
}

//Fade in & out animations

.fade {
  -webkit-transition: opacity $fast linear;
  -o-transition: opacity $fast linear;
  transition: opacity $fast linear;
}

@-webkit-keyframes fade-in-right {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fade-in-right {
  -webkit-animation-name: fade-in-right;
  animation-name: fade-in-right;
}

@-webkit-keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fade-out-up {
  0% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
}

@keyframes fade-out-up {
  0% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
}

.fade-in-down {
  -webkit-animation-name: fade-in-down;
  animation-name: fade-in-down;
}

.fade-out-up {
  -webkit-animation-name: fade-out-up;
  animation-name: fade-out-up;
}

// delay

@mixin delay($from, $to, $divisor) {
  @for $i from $from through $to {
    &:nth-child(#{$i}) { @include transition-delay(#{$i/$divisor}s); }
  }
}

//Zooming in out animations

@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoom-out {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

.zoom-out {
  -webkit-animation-name: zoom-out;
  animation-name: zoom-out;
}

@mixin transform-center-horizontal {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  width: 100%;
  left: 50%;
}

// progress bar animation

.progress-bar-wrapper.ng-hide-add {
  display: block !important;
  -webkit-transition: all .5s linear 1s !important;
  transition: all .5s linear 1s !important;
}

.progress-bar-wrapper.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

// ui-select

.ui-select-match.ng-hide-add, .ui-select-match.ng-hide-remove {
  display: block !important;
}
.ui-select-match.ng-hide-add.ng-hide-add-active {
  display: none !important
}
.ui-select-match.ng-hide-remove.ng-hide-remove-active {
  display: none !important
}

// message beacon

$pulse-color-1: #E8A1A1;
$pulse-color-2: #F0D3D4;

@keyframes pulse-alert {
  0% { box-shadow: none;}
  25% { box-shadow: 0 0 0 6px $pulse-color-1; }
  50% { box-shadow: 0 0 0 12px $pulse-color-2; }
  75% { box-shadow: 0 0 0 6px $pulse-color-1; }
  100% { box-shadow: none;}
}

$pulse-color-1: #b9d4a1;
$pulse-color-2: #accc8f;

@keyframes pulse-success {
  0% { box-shadow: none;}
  25% { box-shadow: 0 0 0 6px $pulse-color-1; }
  50% { box-shadow: 0 0 0 12px $pulse-color-2; }
  75% { box-shadow: 0 0 0 6px $pulse-color-1; }
  100% { box-shadow: none;}
}

// ladda

.ladda-spinner { margin: -8px !important; }

// addresses

.address-animate {
  &.ng-enter, &.ng-leave {
    transition: all 600ms cubic-bezier(0.100, 0.100, 0.750, 0.750);
  }
  &.ng-enter-active {
    background-color: #FFFFE0;
  }
  &.ng-leave-active {
    background-color: #FFFFE0;
  }
}

// opacity change

@-webkit-keyframes opacity-change {
  0%   { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes opacity-change {
  0%   { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes opacity-change {
  0%   { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

// opacity
@for $i from 1 through 10 {
  .opacity-#{$i} {
    @include opacity($i/10);
  }
}
