@import "_Mixins.scss";

.custom-modal-container {
    $topBottomSpacing: 15px;
    $leftRightSpacing: 25px;

    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.49);
    opacity: 0;
    z-index: 2051;
    overscroll-behavior: contain;

    .custom-modal {
        display: flex;
        min-height: 230px;
        max-height: 80%;
        width: 45%;
        min-width: 300px;
        border-radius: 4px;
        @include center-screen();
        background-color: $content-background-color;
        -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
        -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.15);

        @media (max-width: $max-screen-sm) {
            width: 85%;
        }

        &.custom-modal-mobile-full-size {
            @media (max-width: $max-screen-sm) {
                width: 99% !important;
                height: 99% !important;
                max-height: 99% !important;
            }
        }

        .custom-modal-draggable-area{
            cursor: move;
        }

        .custom-modal-resizer {
            width: 16px;
            height: 16px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            cursor: se-resize;
            background-image: url(../images/ui-icons_222222_256x240.png);
            background-position: -64px -224px;
        }

        &.custom-modal-popup {
            max-height: 80%;
            min-height: unset;
            width: 35%;
            max-width: 500px;
            min-width: 150px;

            @media (max-width: $max-screen-md) {
                width: 90%;
            }
        }

        button {
            min-height: 42px;
        }

        .custom-modal-content {
            width: 100%;
            padding: $topBottomSpacing $leftRightSpacing;
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            .custom-modal-type-icon {
                height: 95px;
                width: 95px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: 50%;
                background-color: $disabled-header-field;
                position: absolute;
                top: 0;
                right: 50%;
                border: 2px solid $accent-color;
                border-radius: 50%;
                transform: translate(50%,-50%);
            }

            .custom-modal-alert-icon {
                background-image: $modal-alert-icon;
            }

            .custom-modal-error-icon {
                background-image: $modal-error-icon;
            }

            .custom-modal-question-icon {
                background-image: $modal-question-icon;
            }

            .custom-modal-success-icon {
                background-image: $modal-success-icon;
            }

            .custom-modal-header {
                position: relative;

                .custom-modal-title {
                    color: $main-text-color;
                    float: left;
                    margin-top: 3px;
                    font-weight: 600;
                }

                .custom-modal-icon-tray {
                    top: 0;
                    right: 0;
                    position: absolute;

                    .custom-modal-icon {
                        color: $tabs-nonactive-text;
                        margin-left: 10px;
                        cursor: pointer;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                }
            }

            .custom-modal-body {
                width: 100%;
                height: calc(100% - 150px);
                margin-bottom: 15px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                flex: 1;

                &.custom-modal-body-ignore-overflow-y {
                    overflow-y: unset;
                }

                .custom-modal-body-content {
                }

                .custom-modal-body-buttons {
                    text-align: center;
                    margin-top: auto;
                    padding: 0 30px;
                }
            }

            .custom-modal-footer {
                border-top: 1px solid $divider-color;
                margin-left: $leftRightSpacing * -1;
                padding-left: $leftRightSpacing;
                margin-right: $leftRightSpacing * -1;
                padding-right: $leftRightSpacing;
                padding-top: 10px;
                text-align: right;
            }

            .custom-modal-header-divider {
                border-top: 2px solid $divider-color;
            }
        }
    }
}
