@import 'bootstrap/scss/_functions';

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

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

@mixin animation-delay-loop($from: 0, $to: 10, $delay: 300ms) {
  @for $i from $from through $to {
    &:nth-child(#{$i}) {
      animation-delay: $i * $delay;
    }
  }
}

@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin app-icon-size ($font-size, $scale: 1) {
  font-size: calc(#{$scale} * #{divide($font-size, $app-icon-size-scale-base) * 1em});
  line-height: divide(1, $font-size) * 1em;
  vertical-align: (divide(4, $font-size) - divide(3, 7)) * 1em;
}

@mixin app-icon-layers-size($font-size) {
  line-height: divide(1, $font-size) * 1em;
  vertical-align: (divide(3, $font-size) - divide(3, 8)) * 1em;
}