/**
 * This file provides styles for modal dialogues.
 */

 .dokuwiki .ui-widget {
	font-size: 100%;
	/*min-width: 290px;
	min-height: 285px; */
}

 #mediamanager__page .panelHeader form.options .ui-controlgroup-horizontal label {
	font-size: 90%;
	margin-right: -0.4em;
	padding: .3em .5em;
	line-height: 1;
}

.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	border-bottom-right-radius: 4px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
	border-top-right-radius: 4px;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
	color: #555555;
	text-decoration: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid @ini_border;
	background: @ini_background_neu none;
	color: @ini_text_neu;
}

.dokuwiki .ui-state-active,
.dokuwiki .ui-widget-content .ui-state-active,
.dokuwiki .ui-widget-header .ui-state-active,
.dokuwiki a.ui-button:active,
.dokuwiki .ui-button:active,
.dokuwiki .ui-button.ui-state-active:hover {
	border: 1px solid @ini_border;
	background: @ini_background_alt none;
	color: @ini_text_alt;
}


/* link wizard (opens from the link button in the edit toolbar)
********************************************************************/

#link__wiz {
	resize:	both;
	max-width: 80%;
	max-height: 512px;
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
}

[dir=rtl] #link__wiz_close {
	float: left;
}

#link__wiz .ui-dialog-content {
	width:	100%;
	height: ~"calc(100% - 22px)";
	overflow: hidden;
	color: @ini_text_alt;
	font-size: small;
}

#link__wiz button.ui-dialog-titlebar-close {
	width:		16px;
	height:		16px;
	min-width:	16px;
	min-height:	16px;
	background-color: @ini_background;
	border:		@ini_border solid 1px;
}

#link__wiz #link__wiz_entry {
	width: ~"calc(100% - 5em)";
	border-color: @ini_border;
	background-color: @ini_background;
	color: @ini_text;
	font-family: @ini_mono_fonts;
	font-size: 11pt;
}
#link__wiz #link__wiz_entry:focus {
	outline: @ini_focus_color solid 2px;
}

#link__wiz_result {
	background-color: @ini_background;
	width:  ~"calc(100% - 2px)";
	height: ~"calc(100% - 68px)";
	overflow: auto;
	border: 1px solid @ini_border;
	margin: 3px auto;
	text-align: left;
	font-size: medium;
	line-height: 1em;
}
[dir=rtl] #link__wiz_result {
	text-align: right;
}

#link__wiz_result div {
	padding: 3px 3px 3px 0;
}

#link__wiz_result div a {
	display: block;
	padding-left: 1.3em;
	min-height: 16px;
	background: transparent 3px center no-repeat;
	background-size: 1em;
}
[dir=rtl] #link__wiz_result div a {
	padding: 3px 22px 3px 3px;
	background-position: 257px 3px;
}

#link__wiz_result div.type_u a:link,
#link__wiz_result div.type_u a:visited {
	background-image: url(./images/editor/browse-parent.svg);
	color: @ini_link;
}
#link__wiz_result div.type_f a {
	background-image: url(./images/editor/browse-link.svg);
}
#link__wiz_result div.type_d a:link,
#link__wiz_result div.type_d a:visited {
	background-image: url(./images/editor/browse-folder.svg);
	color: @ini_link;
}

#link__wiz_result div.even {
	background-color: @ini_background_neu;
}

#link__wiz_result div.selected {
	background-color: @ini_background_alt;
}

#link__wiz_result span {
	display: block;
	color: @ini_text_neu;
	margin-left: 22px;
}

#link__wiz .ui-button {
	background-color:	transparent;
	border-color:		transparent;
}

#link__wiz .ui-icon-closethick {
	background:			transparent url(images/editor/close.svg) center no-repeat;
	background-size:	16px;
}

/* media option wizard (opens when inserting media in the media popup)
********************************************************************/

#media__popup {
	/* for backwards compatibility (not needed since Rincewind) */
	display: none;
}

#media__popup_content p {
	margin: 0 0 .5em;
}

#media__popup_content label {
	margin-right: .5em;
	cursor: default;
}

#media__popup_content button {
	margin-right: 1px;
	cursor: pointer;
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {
	body.darkmode {

		.ui-state-default,
		.ui-widget-content .ui-state-default,
		.ui-widget-header .ui-state-default,
		.ui-button,
		html .ui-button.ui-state-disabled:hover,
		html .ui-button.ui-state-disabled:active {
			border-color: @ini_text_alt_dark;
			background: @ini_background_dark;
			color: @ini_text_dark;
		}

		.ui-state-active,
		.ui-widget-content .ui-state-active,
		.ui-widget-header .ui-state-active,
		a.ui-button:active,
		.ui-button:active,
		.ui-button.ui-state-active:hover {
			border-color: @ini_text_alt_dark;
			background-color: @ini_background_alt_dark;
			color: @ini_text_alt_dark;
		}

		#link__wiz {
			background-color: @ini_background_dark;
			border-color: @ini_border_dark;
		}
		#link__wiz .ui-widget-header {
			background: @ini_background_alt_dark none;
			border-color: @ini_border_dark;
		}
		#link__wiz .ui-widget-header .ui-dialog-title {
			color: @ini_headlines_dark;
		}
		#link__wiz #link__wiz_entry {
			border-color: @ini_border_dark;
			background-color: @ini_background_alt_dark;
			color: @ini_text_dark;
		}
		#link__wiz_result div.type_u a:link,
		#link__wiz_result div.type_u a:visited,
		#link__wiz_result div.type_u a:link,
		#link__wiz_result div.type_u a:visited {
			color: @ini_link_dark;
		}
		#link__wiz button.ui-dialog-titlebar-close {
			border-color: @ini_border_dark;
		}
		#link__wiz .ui-icon-closethick {
			background-color: @ini_background_dark;
		}

		#link__wiz_result {
			background-color: rgba(0,0,0,.2);
			border-color: @ini_border_dark;
		}
		#link__wiz_result div.even {
			background-color: @ini_background_dark;
		}
	}
}