@use "sass:list";
@use "sass:map";

$menu: "szh-menu";
$duration: 0.15s;
$directions: (
  "left": "X" 1,
  "right": "X" -1,
  "top": "Y" 1,
  "bottom": "Y" -1,
);

@mixin animation($name, $dir) {
  .#{$menu}--state-opening.#{$menu}--dir-#{$dir} {
    animation: #{$menu}-show-#{$name}-#{$dir} $duration ease-out;
  }

  .#{$menu}--state-closing.#{$menu}--dir-#{$dir} {
    animation: #{$menu}-hide-#{$name}-#{$dir} $duration ease-in forwards;
  }
}

@mixin slide-start($axis, $sign) {
  opacity: 0;
  transform: translate#{$axis }($sign * 0.75rem);
}

@each $dir, $value in $directions {
  $axis: list.nth($value, 1);
  $sign: list.nth($value, 2);

  @keyframes #{$menu}-show-slide-#{$dir} {
    from {
      @include slide-start($axis, $sign);
    }
  }

  @keyframes #{$menu}-hide-slide-#{$dir} {
    to {
      @include slide-start($axis, $sign);
    }
  }
}

@each $dir in map.keys($directions) {
  @include animation("slide", $dir);
}