dialog {
    @apply grid fixed top-0 right-0 bottom-0 left-0 m-0 p-0 pointer-events-none;
    @apply justify-items-center items-start bg-transparent opacity-0 invisible;
    @apply w-full h-full max-w-full max-h-full overflow-y-hidden;
    background-color: rgba(26, 26, 26, 0.75);
    backdrop-filter: blur(0.25rem);
    grid-template-rows: minmax(20dvh, 2rem) 1fr;
    transition:
        opacity 150ms cubic-bezier(0,0,.2,1),
        visibility 150ms cubic-bezier(0,0,.2,1);
    z-index: 100;

    #modal {
        @apply relative rounded-lg bg-white border-gray-200 p-0;
        @apply flex flex-col items-start col-start-1 row-start-2 translate-y-4;
        @apply overscroll-contain overflow-y-auto;
        max-height: calc(100vh - 5em);
        width: 91.666667%;
        max-width: 36rem;
        transition: all 150ms cubic-bezier(0,0,.2,1);
        box-shadow: #00000040 0 1.5rem 4rem -0.5rem;

        > form {
            @apply absolute top-4 right-4;
        }

        > .content {
            @apply w-full;

            /* modal header */
            h2 {
                @apply pr-12;
            }
        }
    }

    &::backdrop {
        display: none;
    }

    &[open] {
        @apply opacity-100 visible;
        pointer-events: inherit;

        #modal {
            @apply translate-y-0;
        }

        &::backdrop {
            @apply opacity-100;
        }
    }
}