cinny/src/app/atoms/modal/RawModal.scss

.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 200ms var(--fluid-slide-up);
}
.ReactModal__Overlay--after-open{
  opacity: 1;
}
.ReactModal__Overlay--before-close{
  opacity: 0;
}

.ReactModal__Content {
  transform: translateY(100%);
  transition: transform 200ms var(--fluid-slide-up);
}

.ReactModal__Content--after-open{
  transform: translateY(0);
}

.ReactModal__Content--before-close{
  transform: translateY(100%);
}

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


  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);
  }
}