@import "../../node_modules/bootstrap/less/variables.less";
@import "../../node_modules/bootstrap/less/mixins.less";

@import "variables.less";

@media(max-width: @screen-md-min) {
    .modal.modal-fullscreen {
        box-shadow: 0px 0px 0px 100px rgba(255, 255, 255, 1); // thick shadow to hide content during mobile Safari overscroll
        .modal-dialog {
            margin: 0;
            width: 100%;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                overflow: hidden;
                .modal-header {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    z-index: 1;
                    height: @modal-fullscreen-mobile-header-height;
                    padding: 0;
                    line-height: @modal-fullscreen-mobile-header-height;
                    background-color: @modal-fullscreen-mobile-header-background;
                    border-color: @modal-fullscreen-mobile-header-border-color;
                    .modal-title {
                        display: inline-block;
                        line-height: @modal-fullscreen-mobile-header-height;
                        position: absolute;
                    }
                    .btn {
                        vertical-align: top;
                        height: @modal-fullscreen-mobile-header-height;
                        .glyphicon {
                            font-size: @modal-fullscreen-mobile-header-font-size;
                        }
                    }
                    .close {
                        display: none;
                    }
                    .fullscreen-buttons {
                        position: relative;
                        z-index: 1;
                        background-color: @modal-fullscreen-mobile-header-background;
                        height: calc(@modal-fullscreen-mobile-header-height - 1px);
                    }
                }
                .modal-body {
                    position: absolute;
                    top: @modal-fullscreen-mobile-header-height;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    overflow: scroll;
                    padding: @modal-fullscreen-mobile-content-padding;
                }
                .modal-footer {
                    display: none;
                }
            }
        }
    }
}

@media(min-width: @screen-md-min) {
    .modal.modal-fullscreen {
        .modal-dialog {
            .modal-content {
                .modal-header {
                    .btn {
                        display: none;
                    }
                }
            }
        }
    }
}