//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .mfp-wrap {
        .mfp-container {
            padding: 0 12px;
        }

        .mfp-inline-holder .mfp-content,
        .mfp-ajax-holder .mfp-content {
            width: auto !important;
        }

        .mfp-close-btn-in .mfp-close {
            .lib-font-size(40);
            color: @djo-gray;
            height: auto;
            line-height: 0;
            right: 10px;
            top: 29px;
            width: auto;
        }

        .inline-modal {
            background: #fff;
            margin: 20px auto;
            max-width: 600px;
            position: relative;
        }

        .modal-top {
            min-height: 28px;
            padding: 15px;
        }

        .modal-heading {
            .lib-font-size(24);
            display: block;
            line-height: 1.2;
            margin-bottom: 0;
            margin-top: 0;
            max-width: 95%;
        }

        .modal-content {
            border-top: 1px solid #dbdfe1;
            max-height: 550px;
            overflow-y: auto;
            padding: 15px;

            iframe,
            video {
                display: block;
                max-width: 100%;
            }
        }

        button.modal-close:not(.primary) {
            .lib-font-size(16);
            background-color: @button-primary__background;
            border: @button-primary__border;
            border-radius: 0;
            height: 60px;
            width: 100%;

            &:focus,
            &:hover,
            &:active {
                background-color: @button-primary__hover__background;
                border: @button-primary__hover__border;
                box-shadow: none;
            }
        }

        .modal-opener {
            cursor: default;

            &.with-modal {
                cursor: pointer;
            }
        }
    }
}