/* ID:54 */
/*$smallDevWidth:600px;
$smallScreenWidth:890px;*/

body:has(dialog[open]) {
	overflow: hidden;
}

dialog{
  border: none;
  border-radius: 5px;
	grid-template-rows: 5ex 1fr 8ex;
	max-height: 100%;
	max-width: 100%;
	min-width:20em;
	min-height: 20ex;
	overflow: visible;
	/*funktioniert derzeit nicht*/
	overscroll-behavior: contain;
  padding: 0;
	&[open]{
		display: grid;
	}
  &::backdrop{
		background: rgba(0,0,0,0.6);
		backdrop-filter: blur(3px);
		overscroll-behavior: contain;
	}

	/*Firefox performanceproblem backdrop*/
	@-moz-document url-prefix() {
		&::backdrop{
			backdrop-filter: none;
		}
  }
  header,footer{
  }
  header{
		color:var(--mainBarFontColor);
		font-size: 110%;
		padding: 1ex;
		.debugIcon{
			float: right;
			padding: 0;
			text-align: center;
			width: 2em;
		}
	}
  footer{
		align-items: center;
		background: whitesmoke;
		border:none;
		display:flex;
		padding-left: 1ex;
		/*last cancel to right*/
		button.cancel:nth-last-of-type(1){
			margin-left: auto;
		}
	}
	main{
		outline: none;
		overflow-y: auto;
		padding: 1ex;
		position: relative;
	}

	div.tableWrapper{
		max-height: 100%;
	}
	&.small{

	}
	&.medium{
		max-height:400px;
		max-width:400px;
	}
	&#nestedDialog{
		width:80%;
		height:80%;
	}
	&.big,
	&#externURL
	{
		width:85%;
		height:85%;
	}
	&#externIframeDialog{
		/*display iframe in full size*/
		main{
			line-height: 0;
			padding: 0;
		}
		iframe{
			border: none;
			height: 100%;
			width: 100%;
		}
	}
	/* Größe wird durch Inhalt bestimmt*/
	&.fit{
		/*nur auf dem Desktop; iOS verhält sich sonderbar.... #3817*/
		@media (min-width: 890px/*$smallScreenWidth*/) {
			width: fit-content!important;
			height: fit-content!important;
		}
		max-width: 80%;
		max-height: 80%;
	}
	&#history_window{
		min-width:50em;
	}
	&#messageBox,
	&#confirmBox{
		/* Dialog ohne Explizite Höhe (Safari-Bug)*/
		grid-template-rows: 5ex max-content 8ex;
		max-width:30em;
		min-height:10ex;
		main{
			min-height: 3em;
		}
		#promptMsg{
			width:95%;
		}
	}
	&#messageBox,
	&#history_window{
		footer{
			justify-content: center;
			button.cancel{
				margin-left: unset;
			}
		}
	}

	/*no loading*/
	&#messageBox,
	&#confirmBox,
	&#history_window,
	&#dialogImgEdit{
		main{
			display: block;
		}
		div.loading{
			display: none;
		}
	}

	&#confirmBox{
		footer {
			justify-content: space-between;
		}
	}
	div.erfolg{
		left: auto;
		right: auto;
		position: fixed;
		top: auto;
	}
	&.busy{
		main::before{
			align-content: center;
			animation: fa-spin 2s infinite linear;
			/* prevent slowing down normal page load
			 fixme: maybe use skeleton instead...*/
			animation-delay: 400ms;
			color: lightgrey;
			content:var(--fa-var-spinner);
			display:inline-grid;
			font-family: var(--fa-font);
			font-size: 20em;
			font-style: normal;
			font-variant: normal;
			font-weight: 900;
			height: 100%;
			justify-content: center;
			line-height: 1;
			margin:auto;
			text-rendering: auto;
			width: 100%;
			visibility: visible;
		}

		main{
			overflow: hidden;
			visibility: hidden;
		}
		footer{
			& > *:not(button.closeButton){
				display:none;
			}
		}
	}
}

#debugDialog{
	margin-left: auto;
	padding: 1ex;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}