@import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";

.modal_base() {
    font-family: @colortheme_font;

    background-color: @colortheme_modal-bg;
    color: @colortheme_modal-fg;
    box-shadow: @variables_shadow;

    a {
        color: @colortheme_modal-link;

        &:visited {
            color: @colortheme_modal-link-visited;
        }
    }
}

.modal_main() {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    .cp-modal-container {
        display: none;

        z-index: 100000; //Z modal container
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: @colortheme_modal-dim;

        .cp-modal {
            background-color: @colortheme_modal-bg;
            color: @colortheme_modal-fg;
            box-shadow: @variables_shadow;

            padding: @variables_padding;

            position: absolute;
            top: 15vh; bottom: 15vh;
            left: 10vw; right: 10vw;

            overflow: auto;

            font-family: @colortheme_font;
            text-align: center;

            & > p {
                margin-bottom: 1em;
            }

            .cp-modal-form {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }

            input {
                background-color: @colortheme_modal-input;
                color: @colortheme_modal-input-fg;
                border: 0;
                padding: 8px 12px;
                margin: 1em;
                width: 300px;
                &[type="text"] {
                    background-color: @colortheme_modal-input-fg;
                    color: @cryptpad_text_col;
                    border: 1px solid @colortheme_modal-input;
                }
            }

            .cp-modal-close {
                text-shadow: none;
                color: inherit;

                position: absolute;
                top: 0;
                right: 0;
                margin: @variables_padding;
                cursor: pointer;
            }
        }
    }
}