/* Display Properties */

#displayProperties {
	width: 36em;
	max-width: 100vw;
}

#displayProperties .contentWrapper {
	padding: 0.6em 0.6em 0.4em;
}

#displayProperties .centeredLine {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.6em;
	margin-bottom: 0.2em;
}

#displayProperties .centeredLine button {
	width: 7em;
	padding: 0.5em 0.5em;
}

#displayProperties .tab {
	padding: 1em;
	height: 34.9em;
}

#displayProperties .tab.background .preview,
#displayProperties .tab.scrControl .preview {
	display: flex;
	justify-content: center;
	margin-bottom: 1.2em;
	flex-grow: 1;
	align-items: center;
	max-height: 17.2em;
}

#displayProperties .tab.background .preview .monitor,
#displayProperties .tab.scrControl .preview .monitor {
	position: relative;
	width: 18.4em;
	height: 16.9em;
	background-image: url('../img/displayProperties_monitor.png');
	background-size: cover;
}

#displayProperties .tab.background .preview .monitor .previewDisplay,
#displayProperties .tab.scrControl .preview .monitor .previewDisplay {
	background-color: var(--desktop-color);
	position: absolute;
	left: 1.6em;
	top: 1.7em;
	width: 15.2em;
	height: 11.2em;
}

#displayProperties .panel {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

#displayProperties select {
	width: 100%;
}

#displayProperties .buttonWrapper {
	text-align: right;
}

#displayProperties .buttonWrapper button {
	width: 8em;
}

#displayProperties .tab.active {
	display: flex;
	flex-direction: column;
}

#displayProperties .backgroundOptions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#displayProperties .backgroundOptions div {
	display: flex;
	align-items: center;
}

@media (max-height: 36em) {
	#displayProperties .preview {
		display: none;
	}
}

[background='clouds'] {
	background-image: url('../img/background_clouds.png');
	background-size: 64em 48em;
}

#displayProperties .previewDisplay[background='clouds'] {
	background-image: url('../img/background_clouds_preview.png');
	background-size: 12.8em 9.6em;
}

[background='setup'] {
	background-image: url('../img/background_setup.png');
	background-size: 64em 48em;
}

#displayProperties .previewDisplay[background='setup'] {
	background-image: url('../img/background_setup_preview.png');
	background-size: 12.8em 9.6em;
}

[background='bricks'] {
	background-image: url('../img/background_bricks.png');
	background-size: 3.2em 3.2em;
}

#displayProperties .previewDisplay[background='bricks'] {
	background-image: url('../img/background_bricks_preview.png');
	background-size: 0.8em 0.8em;
}

[background='geometry'] {
	background-image: url('../img/background_geometry.png');
	background-size: 3.2em 1.6em;
}

#displayProperties .previewDisplay[background='geometry'] {
	background-image: url('../img/background_geometry_preview.png');
	background-size: 0.6em 0.3em;
}

[background='federation'] {
	background-image: url('../img/background_federation.png');
	background-size: 64em 48em;
}

#displayProperties .previewDisplay[background='federation'] {
	background-image: url('../img/background_federation_preview.png');
	background-size: 12.8em 9.6em;
}

[backgroundMode="center"] {
	background-position: center;
	background-repeat: no-repeat;
}

#displayProperties .tab.appearance .previewWrapper {
	flex-grow: 1;
}

#displayProperties .tab.appearance .preview {
	background-color: var(--desktop-color);
	font-family: var(--font);
	color: var(--standard-text-color);
	--text-color: var(--standard-text-color);
	height: 100%;
	position: relative;
	overflow: hidden;
}

#displayProperties .tab.appearance .preview .window:not(.active) {
	position: absolute;
	top: 1.0em;
	left: 0.8em;
	right: 3.0em;
	bottom: 3.6em;
}

#displayProperties .tab.appearance .preview .window.active:not(.dialog) {
	position: absolute;
	top: 3.2em;
	left: 1.2em;
	right: 0.8em;
	bottom: 3.0em;
}

#displayProperties .tab.appearance .preview .window.active.dialog {
	position: absolute;
	width: 18em;
	left: 2.2em;
	bottom: 0.8em;
}

#displayProperties .tab.appearance .preview .window.active.dialog .contentWrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	margin: 0 0.2em;
}

#displayProperties .tab.appearance .preview .window > header:not(:has(.icon)):before {
	display: none;
}

#displayProperties .tab.appearance .preview .window.active textarea {
	height: 100%;
}

#displayProperties .tab.appearance .preview .window.active.dialog .contentWrapper span {
	width: 100%;
}

#displayProperties .tab.appearance .preview .window.active.dialog .contentWrapper button {
	width: 6em;
}

#displayProperties .tab.appearance .preview .window button {
	pointer-events: none;
}

#displayProperties .tab.appearance .preview .window textarea::selection {
	background-color: transparent;
	color: inherit;
}

#displayProperties .tab.appearance .controlRow {
	display: flex;
	align-items: flex-end;
	gap: 0.8em;
	margin-top: 0.8em;
}

#displayProperties .tab.appearance .controlRow .controlWrapper {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

#displayProperties .tab.appearance .controlRow .controlWrapper.scheme {
	width: 100%
}

#displayProperties .tab.appearance .controlRow .controlWrapper.item,
#displayProperties .tab.appearance .controlRow .controlWrapper.font {
	width: 22.4em;
}

#displayProperties .tab.scrControl .screensaverSelectWrapper {
	display: flex;
	gap: 0.4em;
}

#displayProperties .tab.scrControl .screensaverSelectWrapper .selectWrapper {
	flex-grow: 1;
}

#displayProperties .tab.scrControl .screensaverSelectWrapper > button {
	width: 7.6em;
}

#displayProperties .tab.scrControl .screensaverTimeWrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4em;
	padding: 0 0.2em;
}

#displayProperties .tab.scrControl .screensaverTimeWrapper input {
	width: 4em;
	padding: 0.3em;
}

#displayProperties .tab.scrControl .preview .monitor .previewDisplay {
	background-size: cover;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}