:root {
    --spark-dialog-background: #ffffff;
    --spark-dialog-header-background: #000000;
    --spark-dialog-header-fontsize: 1em;
    --spark-dialog-header-color: #ffffff;

    --spark-dialog-text-color: #000000;
    --spark-dialog-text-fontsize: 1em;
    --spark-dialog-alert-color: #ff0000;
    --spark-dialog-alert-fontsize: 1.2em;
}

.Dialog {
    box-sizing: border-box;
    display:grid;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;

    z-index:100;
    overflow-y: auto;

}
.Dialog[modal] {
    background-color: rgba(0,0,0,0.8);

}
.Dialog[modal] .Inner {
    box-shadow: 0px 0px 5px 1px rgba(255,255,255,0.8);
    border:1px solid #909090;

}

.Dialog .Inner {
    background-color: var(--spark-dialog-background);
    display:inline-flex;
    flex-direction:column;
    box-sizing: border-box;
    align-self: center;
    justify-self: center;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    padding:2px;

    box-shadow: 0 0 15px 2px rgba(0,0,0,0.75);

    min-width: 0;
}

.Dialog .Inner .Header {

    display: flex;
    flex-direction:row;
    user-select: none;

    font-weight: bold;

    font-size: var(--spark-dialog-header-fontsize);
    color: var(--spark-dialog-header-color);
    background-color: var(--spark-dialog-header-background);

    box-sizing: border-box;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    padding: 0.3em;

    min-width: 0;
}

.Dialog .Inner .Header .Title {

}


.Dialog .Inner .Content {
    display: inline-flex;
    flex-direction:row;
    padding: 0.5em;
    gap:0.5em;
    align-items:center;

    min-width: 0;
}

.Dialog[type="Plain"] .Inner .Content {
    flex-direction: column;
    align-items: flex-start;
}

.Dialog[type="Plain"] .Inner .Content .InputComponent {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    align-self:stretch;
}


.Dialog .Inner .Content .Icon {
    width: 64px;
    height: 64px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center center;
}

.Dialog[type="Plain"] .Inner .Content .Icon {
    display: none;
}

.Dialog[type="Info"] .Inner .Content .Icon {
    background-image: url("../images/dialog/info.svg");
}

.Dialog[type="Question"] .Inner .Content .Icon {
    background-image: url("../images/dialog/question.svg");
}

.Dialog[type="Error"] .Inner .Content .Icon {
    background-image: url("../images/dialog/nosign.svg");
}

.Dialog .Inner .Content .Text {
    font-size:var(--spark-dialog-text-fontsize);
    color:var(--spark-dialog-text-color);
}
.Dialog .Inner .Content .Text .alert {
    color: var(--spark-dialog-alert-color);
    font-size: var(--spark-dialog-alert-fontsize);
}

.Dialog .Inner .Footer {
    display: inline-flex;
    flex-direction:row;
    justify-self: flex-end;
    justify-content: flex-end;
    padding:0.5em;
    flex-wrap:wrap;

    min-width: 0;
}

.Dialog .Inner .Footer .Buttons {
    display: inline-flex;
    align-items: flex-end;

    align-self:flex-end;

    gap:0.5em;

}



.Dialog.resizable {


}

.Dialog.resizable .resizer {
    width: 20px;
    height: 20px;
    border-radius: 50%; /*magic to turn square into circle*/
    background: transparent;
    /*border: 1px solid #4286f4;*/
    position: absolute;

}

.Dialog.resizable .resizer.top-left {
    left: -5px;
    top: -5px;
    cursor: nwse-resize; /*resizer cursor*/
}

.Dialog.resizable .resizer.top-right {
    right: -5px;
    top: -5px;
    cursor: nesw-resize;
}

.Dialog.resizable .resizer.bottom-left {
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize;
}

.Dialog.resizable .resizer.bottom-right {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;


    /*background-image: linear-gradient(135deg, #ffffff 25%, #808080 25%, #808080 50%, #ffffff 50%, #ffffff 75%, #808080 75%, #808080 100%);*/
    /*background-size: 5.00px 5.00px;*/
    /*border-style: solid;*/
    /*!*border-width: 0 0 6px 6px;*!*/
    /*border-bottom-right-radius:50%;*/
    /*border-top-width:0;*/
    /*border-left-width:0;*/
}

.Dialog[loading] .Inner .Footer {
    display:none;
}