.raw-modal {
  --small-modal-width: 525px;
  --medium-modal-width: 712px;
  --large-modal-width: 1024px;

  position: relative;
  width: 100%;
  max-height: 100%;
  border-radius: var(--bo-radius);
  box-shadow: var(--bs-popup);
  outline: none;
  overflow: hidden;

  &__small {
    max-width: var(--small-modal-width);
  }
  &__medium {
    max-width: var(--medium-modal-width);
  }
  &__large {
    max-width: var(--large-modal-width);
  }

  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

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

    padding: var(--sp-normal);
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay);
  }
}

.ReactModal__Overlay {
  animation: raw-modal--overlay 150ms;
}

.ReactModal__Content {
  animation: raw-modal--content 150ms;
}

@keyframes raw-modal--content {
  0% {
    transform: translateY(100px);
    opacity: .5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes raw-modal--overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}