.size-full{
    @apply h-full w-full
}

.modal-area-wrapper{
    @apply size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none
}

.modal-animated-area{
    @apply scale-95 opacity-0 ease-in-out transition-all duration-200 sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-3.5rem)] flex items-center
}

.the-modal-box{
    @apply w-full flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto
}

.modal-title{
    @apply text-18 lg:text-20 font-bold text-gray-800
}

.modal-close-button{
    @apply w-8 h-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none;
    svg{
        @apply w-4 h-4
    }
}