/*
 * The floating window DialogWindow.make() decorates (js/dialogs/window.js): the box, its header
 * bar and the buttons in it. What the window holds styles itself — the translation panel keeps
 * its own sections in ui/admin/translate/panel.css.
 */

.dlg-window {
	position: fixed;
	z-index: 99999;
	/* A width set on the window is the whole window: a border of its own must not push it past
	   the edge of the screen in full screen. */
	box-sizing: border-box;
	min-width: 360px;
	min-height: 240px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}

.dlg-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 6px 0 12px;
	box-sizing: border-box;
	background: #333;
	color: #fff;
	font: 14px/32px Tahoma, sans-serif;
	cursor: move;
	user-select: none;
}

.dlg-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dlg-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.dlg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #555;
	color: #fff;
	border: 0;
	width: 26px;
	height: 22px;
	padding: 0;
	cursor: pointer;
}
.dlg-icon:hover { background: #777; }
.dlg-icon i { font-size: 17px; line-height: 1; }
.dlg-icon-close { margin-left: 10px; }
.dlg-icon-close:hover { background: #a33; }

/* Folded: the header alone. */
.dlg-collapsed {
	height: auto !important;
	min-height: 0;
}
.dlg-collapsed > *:not(.dlg-head) { display: none; }

/* A window opened by DialogWindow.open(): the page behind it, the area the content fills, and
   the iframe in it. A window made from an element that already exists uses none of these. */
.dlg-backdrop {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99998;
	background: rgba(30, 30, 30, .6);
}

.dlg-body {
	/* The header is 32px of the window's own height, and the strip below leaves the browser's
	   resize grip a corner the iframe does not cover. */
	height: calc(100% - 48px);
	overflow: auto;
}

.dlg-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

body.dlg-dragging { user-select: none; }

/* The module's own resize grip in the bottom right corner, above whatever the window holds. */
.dlg-grip {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	z-index: 1;
	cursor: nwse-resize;
	/* Three short diagonal lines in the corner, the usual grip. */
	background: repeating-linear-gradient(135deg, transparent 0 3px, #8a8a8a 3px 4px);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}