/*@example
<div is="dialog-window" title="Dialog" now="open" has="modal-layout">
<div is="dialog-window-content">Text</div>
<footer is="dialog-window-footer">
<button is="button">OK</button>
</footer>
</div>*/
@layer component {
    [is=dialog-window] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1100;
        display: none;
        /* background: var(--background-littel-lighter-color);*/
        background: var(--background-color);
        border-radius: var(--border-radius);
        box-shadow: var(--default-box-shadow);
        min-width: 320px;
        max-height: 80vh;
        overflow: hidden;

        &[now~=open] {
            display: flex;
            flex-direction: column;
        }

        [is=dialog-window-header] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-s);
            border-bottom: var(--dark-divider-border);
            cursor: move;
        }

        [is=dialog-window-title] {
            flex: 1;
            margin-right: var(--space-s);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        [is=dialog-window-content] {
            padding: var(--space-m);
            min-height: 0;
            overflow-y: auto;
            flex: 1 1 auto;
        }

        [is=dialog-window-footer] {
            display: flex;
            gap: var(--space-xs);
            justify-content: flex-end;
            padding: var(--space-s);
            border-top: var(--divider-border);
        }

        [is=dialog-window-close] {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--foreground-color);
        }
    }

    [is=modal-background] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
    }
}