@use "../basic/layout" as layout;
@use "./chrome-mixins" as ui;

//
@mixin modal {

    //
    .rs-modal-backdrop {
        position: fixed;
        inset: 0;
        display: grid;
        place-content: center;
        place-items: center;
        padding: var(--space-xl);
        z-index: var(--z-modal-backdrop, 400);
        line-height: normal;
        box-sizing: border-box;
        max-inline-size: min(100cqi, 100dvi);
        max-block-size: min(100cqb, 100dvb);
        overflow: hidden;
        perspective: 1000;

        @include ui.glass-backdrop();
    }

    //
    ui-modal, .modal-form {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xs);
        box-sizing: border-box;
        overflow: hidden;

        // Responsive sizing
        inline-size: fit-content;
        min-inline-size: min(calc(100cqi - 1rem), 40rem);
        max-inline-size: stretch;

        block-size: max-content;
        min-block-size: max(calc(90dvb - 1rem), 20rem);
        max-block-size: max(95dvb, 50rem);

        line-height: normal;
        background-color: var(--color-surface, var(--surface-color));
        color: var(--color-on-surface, var(--on-surface-color));
        padding: var(--padding-lg);
        padding-block-end: var(--space-md);
        border-radius: var(--radius-lg);

        backface-visibility: hidden;
        transform: translateZ(0px);
        perspective: 1000;
        content-visibility: auto;
        contain: strict;

        // Mobile overrides
        @media (max-width: 600px) {
            inline-size: fit-content;
            min-inline-size: min(calc(100cqi - 1rem), 40rem);
            max-inline-size: stretch;

            //
            min-block-size: max(calc(90dvb - 1rem), 20rem);
            max-block-size: max(95dvb, 50rem);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0; // If bottom sheet
            // But generic modal:
            border-radius: var(--radius-lg);
            padding: var(--padding-md);
            margin: 0;
        }

        //
        @include ui.tonal-surface(surface-container-low, var(--surface-opacity-subtle), var(--radius-md));
        @include ui.vstack(var(--space-lg));
        @include ui.container-inline;
        @include layout.scrollable("y");

        //
        &, & :where(button, input, textarea, select) {
            touch-action: pan-y;
        }

        //
        &, & :where(*) { box-sizing: border-box; touch-action: pan-y; }
        &, &:focus-visible, &:focus { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; pointer-events: auto; touch-action: pan-y; }

        & {
            contain: strict;
            content-visibility: auto;
        }

        //
        .modal-title {
            margin: 0;
            line-height: 1.2;
            place-content: center;
            place-items: center;
            text-align: center;

            //
            justify-content: safe center;
            justify-items: safe center;

            //
            inline-size: stretch;
            min-inline-size: 0px;

            //
            @include ui.text-heading("headline-small", center);
        }

        //
        .modal-description {
            margin: 0;
            background: transparent;
            place-content: center;
            place-items: center;
            text-align: center;

            //
            justify-content: safe center;
            justify-items: safe center;

            //
            inline-size: stretch;
            min-inline-size: 0px;

            //
            @include ui.text-body("body-medium");
        }

        //
        .modal-section {
            @include ui.section-stack(var(--space-sm));

            //
            padding-block: var(--space-sm);
            background: transparent;
            overflow: visible;
            block-size: max-content;

            //
            inline-size: stretch;
            min-inline-size: 0px;

            //
            grid-template-columns: minmax(0px, 1fr);
            place-content: center;
            place-items: center;

            //
            &:last-of-type {
                border-block-end: none;
            }

            //
            .modal-section-title {
                margin: 0;
                place-content: center;
                place-items: center;
                text-align: center;

                //
                inline-size: stretch;
                min-inline-size: 0px;

                //
                justify-content: safe center;
                justify-items: safe center;

                //
                @include ui.text-label("title-small", true);
            }

            //
            .modal-section-fields {
                @include ui.field-stack(var(--space-sm));
            }
        }

        //
        .modal-actions {
            @include ui.inline-toolbar(var(--space-md));
            justify-content: space-between;
            inline-size: stretch;
            min-inline-size: 0px;
            overflow: visible;
            background: transparent;
            border: none 0px transparent;
            outline: none 0px transparent;
            flex-wrap: nowrap;

            //
            .modal-actions-right {
                @include ui.inline-toolbar(var(--space-sm));
            }
        }

        //
        .modal-fields {
            inline-size: stretch;
            min-inline-size: fit-content;
            max-inline-size: stretch;
            padding-inline: var(--space-sm);
            max-block-size: stretch;
            block-size: fit-content;
            overflow-y: auto;
            overflow-x: hidden;
            display: grid;
            pointer-events: auto;

            //
            grid-template-columns: minmax(0px, 1fr);
            grid-auto-rows: minmax(0px, max-content);

            //
            @include ui.field-stack(var(--space-md));
            @include ui.container-inline;
            @include ui.scrollbars(6px, var(--surface-opacity-emphasis));

            //
            text-align: start;
            justify-content: start;
            justify-items: start;
            pointer-events: auto;

            //
            .contacts-group, .modal-field {
                display: flex;
                flex-direction: column;
                gap: var(--space-sm);

                //
                place-content: center;
                place-items: center;

                //
                align-content: safe center;
                align-items: safe center;

                //
                inline-size: stretch;
                min-inline-size: fit-content;
                max-inline-size: stretch;

                //
                pointer-events: auto;

                //
                label {
                    text-align: start;
                    align-content: start;
                    align-items: start;
                    align-self: start;
                }
            }
        }
    }
}

/**
 * Native-first helper styles. Kept separate from `modal()` because legacy
 * `ui-modal` rules use containment that is unsafe for focusable dialog content.
 */
@mixin transient-modal {
    dialog.ui-modal-dialog {
        inline-size: min(100% - 2rem, 36rem);
        max-inline-size: calc(100dvi - 2rem);
        max-block-size: calc(100dvb - 2rem);
        margin: auto;
        padding: 0;
        border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
        border-radius: var(--radius-lg, 1rem);
        background: var(--modal-bg, Canvas);
        color: var(--modal-fg, CanvasText);
        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
        overflow: visible;

        &::backdrop {
            background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
            backdrop-filter: blur(4px);
        }
    }

    .ui-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--ui-modal-fallback-z, 2147483646);
        display: grid;
        place-items: center;
        padding: 1rem;
        background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
        backdrop-filter: blur(4px);
        pointer-events: auto;
    }

    .ui-modal-panel {
        inline-size: min(100%, 36rem);
        max-block-size: calc(100dvb - 2rem);
        overflow: auto;
        box-sizing: border-box;
        padding: var(--modal-padding, 1.25rem);
        border-radius: var(--modal-radius, var(--radius-lg, 1rem));
        background: var(--modal-bg, Canvas);
        color: var(--modal-fg, CanvasText);
        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
        pointer-events: auto;
    }
}