/*!
 * AD Weave Design System (ad-modal.css)
 * Version: 1.0
 * License: GNU General Public License v2.0 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/* This .css file is used for create modal dialog classes and standards */

/* --------------------------------------------
/* Table of Content
/* --------------------------------------------
   Modal with Default Structure
   Modal with Header Style
   Modal with Body Style
   Modal with Footer Style
   Modal with Title Style
   Modal with Subtitle Style
   Modal with Sizing Variations
*/

/* ============================================
/* AD Modal Component .ad-modal prefix
============================================ */
.ad-modal{
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--modal-zindex);
    width: var(--width-100);
    height: var(--height-100);
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.ad-modal-dialog {
    position: relative;
    width: auto;
    margin: var(--spacer8);
    pointer-events: none;
}
.ad-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--width-100);
    pointer-events: auto;
    background-color: var(--modal-bg);
    background-clip: padding-box;
    border: var(--modal-border-width) var(--modal-border-style) rgba(var(--cc-black-alpha), 0.2);
    -moz-border-radius: var(--modal-border-radius);
    -webkit-border-radius: var(--modal-border-radius);
    border-radius: var(--modal-border-radius);
    outline: 0;
}

/* Modal Header Style */
.ad-modal .ad-modal-header {
    display:flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
	padding:var(--modal-header-spacer-y) var(--modal-header-spacer-x) 0 var(--modal-header-spacer-x);
	margin-bottom:var(--modal-header-spacer-y);
    -moz-border-top-left-radius: var(--modal-border-radius);
    -webkit-border-top-left-radius: var(--modal-border-radius);
    border-top-left-radius: var(--modal-border-radius);
}
.ad-modal .ad-modal-header.ad-modal-border {
	border-bottom: var(--modal-header-border-style) var(--modal-header-border-width) var(--modal-header-border-color);
	padding-bottom:var(--modal-header-spacer-y);
	margin-bottom:0;
}

/* Modal Body Style */
.ad-modal .ad-modal-body {
	padding:0 var(--modal-spacer);
	margin-bottom:var(--modal-spacer-y);
	margin-top:var(--modal-spacer-y);
    position: relative;
    flex:1 1 auto;
}

/* Modal Footer Style */
.ad-modal .ad-modal-footer {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
	padding:0 var(--modal-footer-spacer-y) var(--modal-footer-spacer-x) var(--modal-footer-spacer-x);
	margin-top:var(--modal-footer-spacer-y);
    -moz-border-bottom-left-radius: var(--modal-border-radius);
    -webkit-border-bottom-left-radius: var(--modal-border-radius);
    border-bottom-left-radius: var(--modal-border-radius);
}
.ad-modal .ad-modal-footer.ad-modal-border {
	border-top: var(--modal-footer-border-style) var(--modal-footer-border-width) var(--modal-footer-border-color);
	padding-top:var(--modal-footer-spacer-y);
	margin-top:0;
}

/* Modal Typography Style */
.ad-modal-title {
    font-family:var(--modal-title-font-family);
	line-height:var(--modal-title-line-height);
	color:var(--modal-title-color);
    margin-bottom:0;
    margin-top:0;
}
.ad-modal-title:last-child {
	margin-bottom:0;
}
.ad-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--modal-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-backdrop-bg);
    opacity:var(--modal-backdrop-opacity);
}
.ad-modal-centered {
    display: flex;
    align-items: center;
    min-height: calc(var(--width-100) - var(--spacer));
}
.ad-modal-dialog-centered:before {
    display: block;
    min-height: calc(100vh) - var(--spacer);
    content: "";
}

/* ============================================
/* AD Modal Component - Responsive
============================================ */
@media (min-width: 576px){
    .ad-modal-dialog {
        max-width:var(--modal-md);
        margin:var(--modal-dialog-margin) auto;
    }
    .ad-modal-sm {
        max-width:var(--modal-sm);
        margin:var(--modal-dialog-margin) auto;
    }
    .ad-modal-centered {
        min-height:calc(var(--width-100) - var(--modal-dialog-margin * 2));
    }
    .ad-modal-centered::before {
        height:calc(100vh - var(--modal-dialog-margin * 2));
    }
}
@media (min-width: 992px){
    .ad-modal-lg,
    .ad-modal-xl {
        max-width:var(--modal-lg);
        margin:var(--modal-dialog-margin) auto;
    }
}
@media (min-width: 1200px){
    .ad-modal-xl {
        max-width:var(--modal-xl);
        margin:var(--modal-dialog-margin) auto;
    }
}