@use 'sass:map';

@use '../design/variables.scss' as *;
@use '../shared/variables.scss' as *;

$-popup-types: (
  top: 'Y(-100%) translateX(-50%)',
  right: 'X(100%)',
  bottom: 'Y(100%) translateX(-50%)',
  left: 'X(-100%)'
);

@mixin -start($type) {
  opacity: 0%;
  transform: translate#{map.get($-popup-types, $type)} translateZ(0);
}

@mixin -end($type) {
  opacity: 100%;

  @if $type == 'top' or $type == 'bottom' {
    transform: translate3d(-50%, 0, 0);
  } @else {
    transform: translate3d(0, 0, 0);
  }
}

@each $type in map.keys($map: $-popup-types) {
  $root-name: #{$namespace}-popup-#{$type};

  .#{$root-name} {
    @at-root {
      &-enter-active,
      &-leave-active {
        pointer-events: none;
        user-select: none;
        animation-duration: value('transition-duration');
      }

      &-enter-active {
        animation-name: #{$root-name}-in;
      }

      &-leave-active {
        animation-name: #{$root-name}-out;
      }
    }
  }

  @keyframes #{$root-name}-in {
    0% {
      @include -start($type);
    }

    100% {
      @include -end($type);
    }
  }

  @keyframes #{$root-name}-out {
    0% {
      @include -end($type);
    }

    100% {
      opacity: 0%;
    }
  }
}