@import url('admin/input-wrapper.css');

body:has(dialog[open])
{
	overflow: hidden;
}
.ui-modal
{
	background: none;
	border: none;
	font-size: var(--base-fontsize);
	margin: auto;
	
	&:not(.ui-window)
	{
		border-radius: 5px;
		box-shadow: 1px 1px 35px light-dark(hsl(0deg 0% 0% / 12%), hsl(0deg 0% 100% / 12%));
	}
	&:not(.ui-window) > .content, &.ui-window .content .frame
	{
		background: var(--color-main-background);
	}
	
	& > .content
	{
		box-sizing: border-box;
		color: var(--color-text);
		font-size: var(--base-fontsize);
		max-height: calc(100vh - 60px);
		padding: 15px;
		text-align: center;
	}
	
	&.ui-loading
	{
		.content
		{
			line-height: 1;
			text-align: center;
		}
	}
	&.ui-dialog
	{
		width: calc(100vw - 60px);
		
		.content
		{
			--gap: 10px;
			display: flex;
			flex-flow: column nowrap;
			gap: 5px;
			padding: 15px;
			
			*:is(button, a.button):not(.contents *)
			{
				background: none;
				border: none;
				border-radius: 5px;
				display: flex;
				font-size: var(--base-fontsize);
				gap: 6px;
				line-height: 1;
				transition: color .36s, background-color .36s;
				
				i
				{
					line-height: 1;
				}
			}
			.titlebar
			{
				align-items: center;
				display: flex;
				flex-flow: row nowrap;
				gap: var(--gap);
				
				strong.title
				{
					flex: 1;
					line-height: 1;
					text-align: left;
				}
				button, a.button
				{
					color: var(--button-background);
					
					&:hover
					{
						background: var(--button-color);
					}
				}
			}
			.contents
			{
				flex: 1;
				overflow-y: auto;
				text-align: left;
				
				p i
				{
					vertical-align: middle;
				}
			}
			.buttons
			{
				display: flex;
				flex-flow: column nowrap;
				gap: var(--gap);
				
				button, a.button
				{
					background: var(--button-background);
					color: var(--button-color);
					
					&:hover, &.highlight
					{
						background: var(--color-menu-button);
						color: var(--color-menu-button-text);
					}
				}
			}
			& > .buttons
			{
				flex-flow: row nowrap;
				justify-content: flex-end;
			}
			hr.separator
			{
				background: none; /* var(--color-lines);*/
				border: none;
				height: 1px;
			}
		}
	}
	&.ui-window
	{
		height: 100%;
		margin: auto;
		max-width: none;
		max-height: none;
		padding: 0;
		overflow: hidden;
		width: 100%;
		
		.content
		{
			background: none !important;
			display: flex;
			flex-flow: column nowrap;
			gap: 10px;
			height: 100%;
			max-width: none;
			max-height: none;
			padding: 0;
			width: 100%;
			
			.frame
			{
				iframe
				{
					height: 100%;
					width: 100%;
				}
			}
		}
	}
	.ui-dialog-form
	{
		display: flex;
		flex-flow: column nowrap;
		gap: 15px;
	}
	&::backdrop
	{
		backdrop-filter: blur(5px);
		background-color: hsl(0deg 0% 0% / 36%);
	}
}
.tippy-box
{
	color-scheme: light light;
	--border: 2px;
	background: var(--color-background0);
	background-clip: padding-box;
	border: solid var(--border) var(--color-text);
	font-size: var(--base-fontsize) !important;
	
	& > .tippy-content
	{
		color: var(--color-text);
		white-space: pre-wrap;
	}
	& > .tippy-arrow
	{
		color: var(--color-text) !important;
	}
	&[data-placement^=top] > .tippy-arrow
	{
		bottom: calc(var(--border, 0) * -1);
	}
	&[data-placement^=bottom] > .tippy-arrow
	{
		top: calc(var(--border, 0) * -1);
	}
	&[data-placement^=right] > .tippy-arrow
	{
		left: calc(var(--border, 0) * -1);
	}
	&[data-placement^=left] > .tippy-arrow
	{
		right: calc(var(--border, 0) * -1);
	}
}

@media (max-width: 767px) or (orientation: portrait)
{
	.ui-modal
	{
		&.ui-window
		{
			.content
			{
				gap: 0;
				
				.frame
				{
					flex: 1;
				}
				.buttons
				{
					flex-flow: row nowrap;
					gap: 0;
					
					button
					{
						border-radius: 0;
						flex: 1;
					}
				}
			}
		}
	}
}
@media (min-width: 768px) and (orientation: landscape)
{
	.ui-modal
	{
		&.ui-dialog
		{
			width: 660px;
			
			& .content
			{
				.buttons
				{
					flex-flow: row wrap;
					
					&.right
					{
						justify-content: flex-end;
					}
				}
			}
		}
		&.ui-window
		{
			padding: 20px;
			
			.content
			{
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				
				.buttons
				{
					flex-flow: column nowrap;
					justify-content: flex-start;
				}
				.frame
				{
					border-radius: 5px;
					box-shadow: 1px 1px 35px light-dark(hsl(0deg 0% 0% / 12%), hsl(0deg 0% 100% / 12%));
					
					iframe
					{
						border-radius: 5px;
						width: 960px;
					}
				}
			}
		}
	}
}