/**
 * MODAL DIALOG
 *
*/
@layer components {
    :where(.n7-dialog) [role="dialog"] {
        @apply flex-col bg-white md:rounded-3xl md:overflow-hidden min-h-[100vh] md:min-h-[20rem] md:max-h-[90vh] md:absolute md:shadow-lg md:left-[50vw] md:top-[50vh] md:-translate-x-[50%] md:-translate-y-[50%];
    }

    :where(.n7-dialog-backdrop.is-active) [role="dialog"] {
        @apply flex;
    }

    .n7-dialog__header {
        @apply flex justify-between px-6 py-4 gap-2 items-center border-b n7-border-gray-01 bg-white;
    }


    .n7-dialog__content {
        @apply bg-white flex-1 overflow-y-auto;
    }

    .n7-dialog__content,
    .n7-dialog__actions {
        @apply px-6 py-4;
    }

    .n7-dialog__actions {
        @apply sticky bottom-0 flex gap-2 border-t n7-border-gray-01 bg-white;
    }

    @media screen and (min-width: 768px) {
        :where(.n7-dialog) [role="dialog"] {
            min-width: calc(768px - (15px * 2));
        /* == breakpoint - left+right margin */
        }
    }

    /* dialog::backdrop, */
    .n7-dialog-backdrop {
        @apply hidden fixed overflow-y-auto w-full h-full top-0 right-0 bottom-0 left-0 z-40 bg-black/25
    }

    .n7-dialog-backdrop.is-active {
        @apply block;
    }

    .no-scroll {
        overflow-y: auto !important;
    }

    /* this is added to the body when a dialog is open */
    .has-dialog {
        overflow: hidden !important;
    }

}