.dialog-modal {
    border: none;
    padding: 0;
    margin: 0;
    margin-top: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    max-width: min(24rem, calc(100vw - 2rem));
    width: max-content;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
                0 4px 6px -4px rgb(0 0 0 / 0.1);
    outline: 1px solid rgb(229 231 235 / 0.5);
    opacity: 0;
}

.dialog-modal.dialog-animated {
    animation: dialog-pop 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top left;
}

.dialog-modal[data-align="center"] {
    left: 50%;
    translate: -50% 0;
}

.dialog-modal[data-align="right"] {
    left: auto;
    right: 0;
}

.dialog-modal[data-align="center"].dialog-animated {
    transform-origin: top center;
}

.dialog-modal[data-align="right"].dialog-animated {
    transform-origin: top right;
}

.dialog-modal.dialog-flip.dialog-animated {
    animation-name: dialog-pop-up;
    transform-origin: bottom left;
}

.dialog-modal.dialog-flip[data-align="center"].dialog-animated {
    transform-origin: bottom center;
}

.dialog-modal.dialog-flip[data-align="right"].dialog-animated {
    transform-origin: bottom right;
}

@keyframes dialog-pop {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(-8px);
    }
    60% {
        transform: scale(1.03) translateY(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes dialog-pop-up {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(8px);
    }
    60% {
        transform: scale(1.03) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 640px) {
    .dialog-modal,
    .dialog-modal[data-align] {
        position: fixed;
        inset: 0;
        translate: none;
        max-width: calc(100vw - 2rem);
        width: 100%;
        margin: auto;
        border-radius: 0.75rem;
    }

    .dialog-modal.dialog-animated,
    .dialog-modal[data-align].dialog-animated {
        animation: dialog-mobile 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes dialog-mobile {
        from {
            opacity: 0;
            transform: translateY(0.5rem) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .dialog-modal::backdrop {
        background: rgb(0 0 0 / 0.25);
        animation: backdrop-fade 250ms ease forwards;
    }

    @keyframes backdrop-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .dialog-modal input:not([type=hidden]):not([type=radio]):not([type=checkbox]),
    .dialog-modal textarea,
    .dialog-modal select {
        font-size: 1rem;
    }
}