/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<dialog class="modal --theme" name="xxx">
    <div class=modal--flex>
        <div class='modal--title'></div>
        <div class='modal--message'></div>
        <div class='modal--container'></div>
        <div class='modal--buttons'>
            <div class='modal--buttons-left'>
                <button class="button button--outlined" gray>#{CANCEL}</button>
            </div>
            <div class='modal--buttons-right'>
                <button class="button button--contained" color="blue">#{OK}</button>
            </div>
        </div>
    </div>
</dialog>

<dialog class="modal --theme" name="xxx">Test</dialog>

*/

dialog.modal{
    --scale: 16px; --space: 16px; --gap: calc(var(--scale) * .5);
	--radius: calc(var(--scale) * .25); --shadow: calc(var(--scale) * .25);
	--title-fs: calc(var(--scale) * 1.25);

    overflow: auto; padding: var(--space);
    max-width: calc(100% - 2 * var(--space));
    max-height: calc(100% - 2 * var(--space));
    border: none !important; border-radius: var(--radius);
    box-shadow: 0 0 var(--shadow) hsla(0,0%,0%,.5); box-sizing: border-box;
	background-color: hsl(var(--hue),var(--saturation),100%);
	color: hsl(var(--hue),var(--saturation),var(--lightness));
    outline: none;
}

div.modal--flex{
    display: flex; flex-direction: column; gap: var(--space);
}

div.modal--title{
    font-weight: bold; font-size: var(--title-fs); margin-bottom: var(--gap); flex-shrink: 0;
}

div.modal--title:empty{
    display: none;
}

div.modal--message:empty{
    display: none;
}

div.modal--container{
    overflow: visible; flex-shrink: 0;
}

div.modal--container:empty{
    display: none;
}

div.modal--buttons{
    display: flex; gap: var(--gap); flex-wrap: wrap; overflow: visible; 
	margin-top: var(--gap); flex-shrink: 0;
}

div.modal--buttons:empty{
    display: none;
}

div.modal--buttons-left{
    display: flex; gap: var(--gap); flex-wrap: wrap; overflow: visible; max-width: 100%;
}

div.modal--buttons-left:empty{
    display: none;
}

div.modal--buttons-right{
    display: flex; gap: var(--gap); flex-wrap: wrap; margin-left: auto; 
	justify-content: flex-end; overflow: visible; max-width: 100%;
}

div.modal--buttons-right:empty{
    display: none;
}