@keyframes popup-appear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popup-disappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

#popup-container {
  .popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgb(0 0 0 / 20%);

    &.appear {
      .popup-container {
        animation: popup-appear 0.3s ease-in-out;
      }
    }

    &.disappear {
      .popup-container {
        animation: popup-disappear 0.3s ease-in-out;
        animation-fill-mode: forwards;
      }
    }
  }
}