/* 
modal dialog is not yet implemented in the bootstrap 5 theme
so we override the css of ui-dialog instead to semi-match along with our own design
*/


/* if a page is inside a modal dialog, we don't want the panel's added padding */
.ui-dialog .node--type-page.panel{ 
    padding: 0 !important; 
    border-radius: 0;
    background: unset;
    margin-top: 1rem;
} 

.ui-dialog-content{ overflow: auto !important; }

.ui-dialog{
    display: flex;
    flex-direction: column;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-border-radius-xl) !important;
    box-shadow: var(--bs-box-shadow) !important;
    outline: 0;
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 24px; /* for body, is only left + right, top/bottom are set to 0 further down */
    --bs-modal-margin: 0.5rem;
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    /* --bs-modal-border-radius: var(--bs-border-radius-xl); */
    /* --bs-modal-box-shadow: var(--bs-box-shadow-sm); */
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - (var(--bs-border-width)));
    /* --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem; */
    --bs-modal-header-padding: 14px 24px;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);    
    line-height: var(--bs-body-line-height);

    --bs-modal-footer-padding: 14px 14px;

}


/* HEADER */
.ui-dialog .ui-dialog-titlebar{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: var(--bs-modal-header-padding);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
    background: unset;
    border-bottom: 0 !important;
}
.ui-dialog .ui-dialog-title{
    font-size: 1.25rem !important;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 500;
    line-height: var(--bs-modal-title-line-height);
    color: var(--color_neutral); /* same as h1 */
}
.ui-dialog .ui-dialog-content{
    margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close {
    /* this is pretty much copy of .btn-close */
    font-family: var(--bs-font-sans-serif) !important;
    font-size: 1rem;
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(3, 113, 240, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--bs-btn-close-opacity);
    right: 1rem;
    cursor: pointer;
}



/* .modal-body in b5 */
.ui-dialog .ui-dialog-content{
    /* all: unset; */
    margin-top: 14px;
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding); /* 24px */
    padding-top: 0 !important;
    padding-bottom: 12px;
}




/* .modal-footer */
.ui-dialog .ui-dialog-buttonpane{
    border-top: 0;
    background: unset;

    padding: var(--bs-modal-footer-padding);
    padding-top: 0 !important;
}


/* fix for bad margin if input placed instead of button  */
/* (replace fix in public_html/themes/soft_b5/js/common.js) */
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane input{
    margin: .5em .4em .5em 0;
}


/* ACTIONS aka form-submit*/
.ui-dialog .ui-dialog-buttonset{
    float: none !important;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}