@use '../../variables/animation/variables' as *;

@mixin animation(
  $bp: delay-,
  $firstnumber: 1,
  $secondnumber: 100,
  $classname: animation-delay,
  $calculate: 100,
  $postfix: ms,
  $multiply: 1ms
) {
  @for $i from $firstnumber through $secondnumber {
    $animationvalue: $i * $calculate;

    .#{$bp}#{$animationvalue}#{$postfix} {
      -webkit-#{$classname}: $animationvalue * $multiply;
      #{$classname}: $animationvalue * $multiply;
    }
    .hover\:#{$bp}#{$animationvalue}#{$postfix} {
      #{$classname}: $animationvalue * $multiply;
    }
  }
}

// handcrafted animation mixins
@mixin animationname($name) {
  -webkit-animation-name: $name;
  animation-name: $name;
}

@mixin transformorigin($origin) {
  -webkit-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin animationtimingfunction($bezier) {
  -webkit-animation-timing-function: $bezier;
  animation-timing-function: $bezier;
}

@mixin transform($transform) {
  -webkit-transform: $transform;
  transform: $transform;
}

@mixin cubic($cubic) {
  -webkit-animation-timing-function: $cubic;
  animation-timing-function: $cubic;
}

@mixin backfacevisibility($state) {
  -webkit-backface-visibility: $state;
  backface-visibility: $state;
}