//
// Modal
// --------------------------------------------------

@if not $prev-modal {
    .modal {
        --hh-modal-content-padding: calc(var(--bs-modal-padding) * 0.8);

        backdrop-filter: blur(2px);
        overflow-y: visible;

        //
        // Animate.css modifications
        // --------------------------------------------------
        .modal-dialog.fadeIn,
        .modal-dialog.pulse {
            animation-duration: 200ms;
        }

        .modal-top {
            z-index: 999999 !important;
        }

        @include media-breakpoint-down(lg) {
            .modal-dialog-large {
                width: auto !important;
                padding-top: 30px;
                padding-bottom: 30px;
            }
        }

        .modal-title {
            font-size: 20px;
            color: var(--hh-text-color-highlight);

            &, & strong {
                font-weight: 600;
            }
        }

        .modal-dialog {
            margin-bottom: calc(var(--hh-mobile-app-safe-area-inset-bottom, env(safe-area-inset-bottom)) + var(--bs-modal-margin)); // for the web view space (safe area) on mobile devices
        }

        .modal-dialog, .modal-content {
            min-width: 150px;
        }

        .modal-content {
            box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
            border: none;
            background-color: var(--hh-background-color-main);
            padding: var(--hh-modal-content-padding);

            .modal-header {
                border-bottom: none;
                text-align: center;
            }

            .modal-body {
                font-size: 13px;
            }

            .modal-footer, .modal-body-footer {
                margin-top: 0;
                border-top: none;
                text-align: center;

                button, .btn {
                    flex: 1;
                }

                hr {
                    margin-top: 0;
                }
            }

            .modal-body-footer {
                display: flex;
                padding-top: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);

                > * {
                    margin: calc(var(--bs-modal-footer-gap) * .5);
                }
            }
        }

        //
        // Full screen modal size
        // --------------------------------------------------
        .modal-dialog.modal-hh-fullscreen {
            display: flex;
            align-items: center;
            max-width: 100%;
            margin: 0 30px;
            height: 100vh;

            .modal-content {
                overflow: hidden;
                padding: 0;
            }

            .modal-body {
                height: calc(100vh - 110px);
                padding: 0;

                > div, > iframe, > div > iframe {
                    width: 100%;
                    height: 100%;
                }
            }

            @include media-breakpoint-down(md) {
                width: 100% !important;
                height: 100% !important;
                margin: 0 !important;
                .modal-content {
                    height: 100% !important;
                    border-radius: 0;
                }
                .modal-body {
                    height: calc(100vh - 57px);
                }
            }
        }
    }

    body.modal-open {
        height: 100vh;
    }

    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
}