:root {
    --modal-anim-pos: -20px;

    --modal-header-bg: #EEE;
    --modal-body-bg: #ddd;
    --modal-body-bg-strong: #FFF;
    --modal-footer-bg: #EEE;

    --modal-header-icon-dim: 20px;

    --modal-header-radius: 20px;
    --modal-body-radius: 20px;

    --modal-closer-color: #333;

    --modal-back-bg: rgba(192,192,192,0.6);

    --modal-shadow: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
    --modal-header-shadow: drop-shadow(0px 4px 2px rgba(0,0,0,0.15));

    --modal-div-line-color: #CCC;
}

[data-theme="dark"] {
    --modal-header-bg: #222;
    /* --modal-body-bg: #000; */
    --modal-body-bg: #333;
    --modal-body-bg-strong: #000;
    --modal-footer-bg: #222;

    --modal-closer-color: #CCC;

    --modal-back-bg: rgba(0,0,0,0.6);

    --modal-shadow: drop-shadow(0 0 6px rgba(0,0,0,0.4));
    --modal-header-shadow: drop-shadow(0px 4px 2px rgba(0,0,0,0.15));

    --modal-div-line-color: #555;
}

.modal-back
{
    display: none;
    flex-direction: row;

    opacity: 0;

    width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--modal-back-bg);
    transition: opacity 0.4s, background-color 0.4s;

    justify-content: center;
    align-items: center;
    
    z-index: 2;

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.modal-back:has(.background-close)
{
    cursor: pointer;
}

.modal-back:has(.modal.opening)
{
    display: flex;
    opacity: 0;
}

.modal-back:has(.modal.open)
{
    display: flex;
    opacity: 1;
}

.modal-back:has(.modal.closing)
{
    display: flex;
    opacity: 0;
}

.modal
{
    display: none;
    transform: translateY(var(--modal-anim-pos));
    transition: transform 0.4s;

    flex-direction: column;
    width: fit-content;
    min-width: 300px;
    max-width: calc(100vw - 20px);

    /* box-shadow: var(--modal-shadow); */

    border-radius: var(--modal-body-radius);

    filter: var(--modal-shadow);
    margin-top: 20px;

    z-index: 3;
}

.modal.medium-width
{
    width: 400px;
}

.modal.form-width
{
    width: 510px;
}

.modal.wider-width
{
    width: 500px;
}

.modal.mobile-full-width
{
    width: 600px;
}

.modal.double-width
{
    width: 1000px;
}

.form-col-width
{
    width: 400px;
}

.form-col-space
{
    width: 20px;
}

.form-col-small-space
{
    width: 5px;
}

.modal.width-as-needed
{
    width: fit-content;
}

.modal.open
{
    display: flex;
    transform: translateY(0);
}

.modal.opening
{
    display: flex;
    transform: translateY(var(--modal-anim-pos));
}

.modal.closing
{
    display: flex;
    transform: translateY(var(--modal-anim-pos));
}

.modal-header
{
    background-color: var(--modal-header-bg);
    padding: 10px;
    margin: -20px 20px -20px 20px;

    cursor: pointer;
    border-radius: var(--modal-header-radius);

    transition: background-color 0.4s;

    /* width: calc(100% - 60px); */
    /* min-width: 240px; */

    /* height: 40px; */
    z-index: 2;

    display: flex;
    flex-direction: row;

    filter: var(--modal-header-shadow);
    align-items: center;

    position: relative; /*Needed for z-index*/
}

.modal-header > .modal-header-icon
{
    width: var(--modal-header-icon-dim);
    height: var(--modal-header-icon-dim);
    color: var(--icon-colour);
    transition: color 0.4s, background-color 0.4s;

    /* margin-right: 20px; */

    padding-left: 5px;
    padding-right: 5px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;
}

.modal-header > .modal-header-icon > svg
{
    width: var(--modal-header-icon-dim);
    height: var(--modal-header-icon-dim);
}

.modal-header > .modal-header-label
{

}

.modal-header > .modal-header-closer
{
    width: var(--modal-header-icon-dim);
    height: var(--modal-header-icon-dim);
    color: var(--modal-closer-color);
    transition: color 0.4s, background-color 0.4s;

    /* align-self: flex-end; */

    margin-left: auto;

    cursor: pointer;

    border-radius: 50%;
}

.modal-header > .modal-header-closer:hover
{
  background-color: var(--tab-label-control-hover);
}

.modal-header > .modal-header-closer > svg
{
    width: var(--modal-header-icon-dim);
    height: var(--modal-header-icon-dim);
}

.modal-body
{
    background-color: var(--modal-body-bg);
    /* background-color: var(--background-color); */
    
    transition: background-color 0.4s;

    /* min-height: 100px; */

    /* width: 100%; */
    /* min-width: 280px; */

    display: flex;
    flex-direction: column;

    padding: 30px 10px 10px 10px;

    border-top-right-radius: var(--modal-body-radius);
    border-top-left-radius: var(--modal-body-radius);

    max-height: calc(100dvh - 150px);
    overflow-y: auto;
}

.modal.strong-bg .modal-body{
    background-color: var(--modal-body-bg-strong);
}

.modal-footer
{
    background-color: var(--modal-footer-bg);
    border-bottom-right-radius: var(--modal-body-radius);
    border-bottom-left-radius: var(--modal-body-radius);
    
    transition: background-color 0.4s;
    display: flex;
    flex-direction: row;

    /* height: 40px; */

    justify-content: center;
    align-items: center;

    padding-top: 5px;
    padding-bottom: 5px;

    border-top: 1px solid var(--modal-div-line-color);

    /* width: 100%; */
    /* min-width: 300px; */
    min-height: 35px;
}

.modal-footer .button-row 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.above-modal-back{
    z-index: 3;
}

.on-modal-back{
    z-index: 1;
}