modal.css

.modal {
  @apply bg-transparent text-[inherit] duration-200 ease-out;
  transition-property: transform, opacity, visibility;
  overflow-y: hidden;
  overscroll-behavior: contain;
  &:not(dialog:not(.modal-open)),
  &::backdrop {
    background-color: #0006;
    animation: modal-pop 0.2s ease-out;
  }
}
.modal-backdrop {
  @apply -z-[1] col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent;
}
.modal-box {
  @apply bg-base-100 rounded-b-box rounded-t-box col-start-1 row-start-1 w-11/12 max-w-lg scale-90 transform p-6 transition duration-200 ease-out;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box {
  @apply translate-y-0 scale-100;
}
.modal-action {
  @apply mt-6 justify-end space-x-2;
}
@keyframes modal-pop {
  0% {
    opacity: 0;
  }
}