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

$-name: '#{$namespace}-zoom';

@mixin -start {
  opacity: 0%;
  transform: translateZ(0) scale(0.35);
}

@mixin -end {
  opacity: 100%;
  transform: translateZ(0) scale(1);
}

.#{$-name} {
  @at-root {
    &-enter-active {
      animation: {
        name: #{$-name}-in;
        duration: value('transition-duration');
      }
    }

    &-leave-active {
      animation: {
        name: #{$-name}-out;
        duration: value('transition-duration');
      }
    }
  }
}

@keyframes #{$-name}-in {
  0% {
    @include -start;
  }

  100% {
    @include -end;
  }
}

@keyframes #{$-name}-out {
  0% {
    @include -end;
  }

  100% {
    @include -start;
  }
}