@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

.animate-height {
  max-height: 0;
  overflow: hidden;

  &--open {
    max-height: 1000px;
    overflow: auto;
    transition: max-height 250ms ease-in-out;
  }
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg) scaleX(-1); // scaleX flips the `sync` icon so arrows point the correct way
  }
  100% {
    transform: rotate(359deg) scaleX(-1);
  }
}

.spin-clockwise {
  animation: spin-clockwise 3s infinite linear;
}