//********** MIXINS **********//
@mixin default($class, $property, $value) {
  .#{$class} {
      #{$property}: #{$value};
  }
}

@mixin anima-default($class, $property, $value) {
  [class*="ani-"][class*="-#{$class}"] {
      #{$property}: #{$value};
  }
}

@mixin global($class, $property, $value) {
  .#{$class},
  .#{$class}-all > * {
      #{$property}: #{$value};
  }
}

@mixin states($class, $property, $value) {
  .#{$class},
  .#{$class}-all > *,
  .#{$class}-onto:hover,
  .#{$class}-onto:focus,
  *:hover > .#{$class}-into,
  *:focus > .#{$class}-into,
  .#{$class}-each > *:hover,
  .#{$class}-each > *:focus,
  .#{$class}-many:hover > *,
  .#{$class}-many:focus > * {
    #{$property}: #{$value};
  }
}

@mixin anima-states($class, $property, $value) {
  [class*="ani-"][class*="-#{$class}"][class*="-it"],
  [class*="ani-"][class*="-#{$class}"][class*="-all"] > *,
  [class*="ani-"][class*="-#{$class}"][class*="-onto"]:hover,
  [class*="ani-"][class*="-#{$class}"][class*="-onto"]:focus,
  *:hover > [class*="ani-"][class*="-#{$class}"][class*="-into"],
  *:focus > [class*="ani-"][class*="-#{$class}"][class*="-into"],
  [class*="ani-"][class*="-#{$class}"][class*="-each"] > *:hover,
  [class*="ani-"][class*="-#{$class}"][class*="-each"] > *:focus,
  [class*="ani-"][class*="-#{$class}"][class*="-many"]:hover > *,
  [class*="ani-"][class*="-#{$class}"][class*="-many"]:focus > * {
    #{$property}: #{$value};
  }
}

//********** KEYFRAMES **********//
@mixin keyframes($key) {
  @keyframes #{$key} {
    from {
      transform: var(--ani-#{$key});
    }
  }
}

@each $key, $value in $transforms {
  @include keyframes($key);
}

//********** GRID **********//
@mixin grid($column, $key) {
  [class*="grid-"][class*="-#{$column}#{$key}"] {
    grid-template: auto/repeat(#{$column}, auto);
  }
}

//********** GAP **********//
@mixin gap($size, $type) {
  [class*="gap-"][class*="-#{$type}#{$size}"] {
    gap: var(--ani-gap#{$size});
  }
}

//********** PLACE **********//
@mixin place-content($key, $type, $value) {
  .content-#{$key}#{$type} {
    place-content: #{$value};
  }
}

@mixin place-items($key, $type, $value) {
  .items-#{$key}#{$type} {
    place-items: #{$value};
  }
}

@mixin place-self($key, $type, $value) {
  .self-#{$key}#{$type} {
    place-self: #{$value};
  }
}

//********** CONTAINER **********//
@mixin container($key, $type, $value) {
  [class*="container-"][class*="-#{$key}#{$type}"] {
    max-width: #{$value};
  }
}