/*
 * UI : Elements
 * should have your custom UI._vars.css
 *
 */
/* UI select ======================================================== */
.ui_select{
	border: 2px solid #fff;
	border-width:  var(--ui_select--borderWidth);
	border-color:  var(--ui_select--bordercolor);
	border-radius: var(--ui_select--borderRadius);
	padding:       var(--ui_select--padding);
	background:    var(--ui_select--bgColor);
	color:         var(--ui_select--color);
	font-size:     var(--ui_select--fontSize);
	font-weight:   var(--ui_select--fontWeight);
	text-transform:var(--ui_select--textTransform);
	transition: 0.4s;
	&:hover{
		background:    var(--ui_select-hover--color);
		color:         var(--ui_select-hover--bgColor);
		border-color:  var(--ui_select-hover--borderColor);
	}
	&:focus {
		background:    var(--ui_select-focus--color);
		color:         var(--ui_select-focus--bgColor);
		border-color:  var(--ui_select-focus--borderColor);
	}
}
/* UI button  ========================================================
 * (a, span, label, button) */
.ui_button{
	cursor:pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 2px solid #fff;
	border-width:  var(--ui_button--borderWidth);
	border-color:  var(--ui_button--bordercolor);
	border-radius: var(--ui_button--borderRadius);
	padding:       var(--ui_button--padding);
	background:    var(--ui_button--bgColor);
	color:         var(--ui_button--color);
	font-weight:   var(--ui_button--fontWeight);
	font-size:     var(--ui_button--fontSize);
	text-transform:var(--ui_button--textTransform);
	transition: 0.4s;
	.ui_icon {
		order: -1;
		font-size: inherit;
	}
	&:hover{
		background:    var(--ui_button-hover--color);
		color:         var(--ui_button-hover--bgColor);
		border-color:  var(--ui_button-hover--borderColor);
	}
/*
	&.ui_button:focus {
		background:    var(--ui_button-focus--color);
		color:         var(--ui_button-focus--bgColor);
		border-color:  var(--ui_button-focus--borderColor);
	}
*/
	&[data-active="false"],
	&[data-active="false"]:hover{
		cursor:default;
		color       :  var(--ui_button-inactive--color);
		border-color:  var(--ui_button-inactive--borderColor);
		background:    var(--ui_button-inactive--bgColor);
		opacity:       var(--ui_button-inactive--opacity);
	}
	&[data-active="true"],
	&[data-active="true"]:hover{
		cursor:default;
		color       :  var(--ui_button-active--color);
		border-color:  var(--ui_button-active--borderColor);
		background:    var(--ui_button-active--bgColor);
	}
}
div.ui_panel{
	height:100%;
	overflow:hidden;
	background:    transparent;
	padding:var(--ui_panel--padding);
	z-index:var(--ui_panel--zIndex);
	> ._inner{
		background:    transparent;
		border: 2px solid #fff;
		border-width:  var(--ui_panel--borderWidth);
		border-color:  var(--ui_panel--bordercolor);
		border-radius: var(--ui_panel--borderRadius);
		display:grid;
		height:100%;
		overflow:hidden;
		> ._body{grid-area:body}
		> ._head{grid-area:head}
		> ._foot{grid-area:foot}
		grid-template-areas:"head" "body" "foot";
		grid-template-rows:max-content 1fr max-content;
		> ._head{
			display:flex;justify-content:space-between;
			padding:          var(--ui_panel_head--padding);
			border-bottom:    var(--ui_panel_head--borderBottom);
			background-color: var(--ui_panel_head--backgroundColor);
			._title{
				color:       var(--ui_panel_head_title--color);
				font-size:   var(--ui_panel_head_title--fontSize);
				font-weight: var(--ui_panel_head_title--fontWeight);
			}
		}
		> ._body{
			overflow:auto;
			display:flex;
			flex-direction:column;
			padding:          var(--ui_panel_body--padding);
			border-bottom:    var(--ui_panel_body--borderBottom);
			background-color: var(--ui_panel_body--backgroundColor);
			gap:              var(--ui_panel_body--gap);
		}
		> ._foot{
			padding: var(--ui_panel_foot--padding);
			background:#fff;
		}
	}
}
dialog.ui_dialog{
	max-height:95vh;
	min-width:450px;
	width:800px;
	max-width:95vw;
	height:100%;
	overflow:hidden;
	margin:auto;
	border:0;
	> ._inner{
		background:    transparent;
		border: 2px solid #fff;
		border-width:  var(--ui_dialog--borderWidth);
		border-color:  var(--ui_dialog--bordercolor);
		border-radius: var(--ui_dialog--borderRadius);
		padding:       var(--ui_dialog--padding);
		height:100%;
		width:100%;
		overflow:hidden;
		display:grid;
		> ._body{grid-area:body}
		> ._head{grid-area:head}
		> ._foot{grid-area:foot}
		grid-template-areas:"head" "body" "foot";
		grid-template-rows:max-content 1fr max-content;
		> ._head{
			display:flex;justify-content:space-between;
			padding:          var(--ui_dialog_head--padding);
			border-bottom:    var(--ui_dialog_head--borderBottom);
			background-color: var(--ui_dialog_head--backgroundColor);
			display:grid;
			grid-template-areas:
				"title toolbar"
				"searchbar searchbar"
				"selection selection"
			;
			grid-template-columns:1fr min-content;
			
			> ._toolbar{   grid-area:toolbar;}
			> ._searchbar{ grid-area:searchbar;}
			> ._selection{ grid-area:selection;}
			._title{
				color:       var(--ui_dialog_head_title--color);
				font-size:   var(--ui_dialog_head_title--fontSize);
				font-weight: var(--ui_dialog_head_title--fontWeight);
			}
		}
		> ._body{
			padding: var(--ui_dialog_body--padding);
			height:100%;
			width:100%;
			overflow:auto;
		}
		> ._foot{
			padding: var(--ui_dialog_foot--padding);
		}
	}
}

/* UI foreground ==================================================== */
.ui_foregroud{
	width:100vw;
	height:100vw;
	z-index:   var(--ui_foregroud--zIndex);
	background:var(--ui_foregroud--background);
	position:fixed;
	top:0;
	left:0;
	display:none;
}

/* UI_filters ======================================================= */
.ui_filter.ui_filter-search,
.ui_filter.ui_filter-select{
	display:flex;flex-direction:row;gap:10px;
	align-items:center;
	label{
		color:       var(--ui_filter_name--color);
		font-size:   var(--ui_filter_name--fontSize);
		font-weight: var(--ui_filter_name--fontWeight);
	}
	.field{
		flex-grow: 5; flex-shrink: 1; flex-basis: 0%;
	}
}
.ui_filter.ui_filter-by-dialog{
	display:grid;
	> ._head{
		width:100%;
		display:flex;flex-direction:row;
		align-items:center;
		background-color: var(--ui_filterByDialog_head--backgroundColor);
		border:           var(--ui_filterByDialog_head--border);
		gap:              var(--ui_filterByDialog_head--gap);
		padding:          var(--ui_filterByDialog_head--padding);
		> ._title {
			flex-grow: 5; flex-shrink: 1; flex-basis: 0%;
			color:      var(--ui_filter_name--color);
			font-size:  var(--ui_filter_name--fontSize);
			font-weight:var(--ui_filter_name--fontWeight);
		}
	}
	> ._body{
		
	}
	> .ui_dialog{
		> ._inner{
			> ._head{
				> ._searchbar{
					display:flex;
				}
			}
			> ._body{
				
			}
		}
	}
	._selection{
		display:flex;
		flex-wrap:wrap;
		gap:5px 10px;
		padding:5px;
	}
	._selection:empty{
		padding:0;
	}
}
.ui_removable-item{
	background-color: var(--ui_removableItem--backgroundColor);
	border:           var(--ui_removableItem--border);
	border-radius:    var(--ui_removableItem--borderRadius);
	gap:              var(--ui_removableItem--gap);
	padding:          var(--ui_removableItem--padding);
	cursor:pointer;
	align-items: center;
	justify-content: center;
	display:grid;
	> ._name{grid-area:name;}
	> ._info{grid-area:info;}
	> .ui_icon{grid-area:icon;}
	grid-template-areas:"name info icon";
	grid-template-columns:max-content min-content min-content;
	> ._name{
		color:       var(--ui_removableItem_name--color);
		font-size:   var(--ui_removableItem_name--fontSize);
		font-weight: var(--ui_removableItem_name--fontWeight);
	}
	> ._info{
		color:       var(--ui_removableItem_info--color);
		font-size:   var(--ui_removableItem_info--fontSize);
		font-weight: var(--ui_removableItem_info--fontWeight);
		font-style:  var(--ui_removableItem_info--font-style);
	}
	> .ui_icon{
		color:       var(--ui_removableItem_icon--color);
		font-size:   var(--ui_removableItem_icon--fontSize);
		font-weight: var(--ui_removableItem_icon--fontWeight);
	}
	&:hover{
		background-color: var(--ui_removableItem-hover--backgroundColor);
		border-color:     var(--ui_removableItem-hover--borderColor);
		._name{
			color: var(--ui_removableItem-hover_name--color);
		}
		._info{
			color: var(--ui_removableItem-hover_info--color);
		}
		.ui_icon{
			color: var(--ui_removableItem-hover_icon--color);
		}
	}
	&[data-active="false"],
	&[data-active="false"]:hover{
		background-color: var(--ui_removableItem-inactive--backgroundColor);
		border-color:     var(--ui_removableItem-inactive--borderColor);
		._name{
			color: var(--ui_removableItem-inactive_name--color);
		}
		._info{
			color: var(--ui_removableItem-inactive_info--color);
		}
		.ui_icon{
			color: var(--ui_removableItem-inactive_icon--color);
			display:none;
		}
	}
}



.pe--filter--taxonomy-vocabulary{
	.taxonomy-tree__node{
		> label{
			display:grid;
			grid-template-columns:max-content 1fr max-content max-content;
			align-items:baseline;
			grid-template-areas:"input name lang count";
			gap:.4rem;
			> input               {grid-area:input;}
			> .term_name          {grid-area:name;}
			> .term_language      {grid-area:lang;}
			> .term_article-counts{grid-area:count;}
		}
		> .taxonomy-tree__children{
			display:grid;
			margin-left:1.15rem;
			padding-left:.65rem;
			border-left:1px solid #d9dee5;
		}
	}
	.taxonomy-tree__node[data-search="found"]{
		> label > span{ background:yellow;}
	}
	.taxonomy-tree__node[data-visible="false"]{
		> label{
			display:none;
		}
	}
}

.pe--ui_loader{
	display:none;
	position:fixed;
	width:100vw;
	height:100vh;
	z-index:1000;
	background:rgba(0,0,0,0.5);
	top:0;
	left:0;
	
	> ._inner{
		width:600px;
		max-width:100vw;
		
		margin:auto;
		margin-top:40px;
		border:var(--clr-orange-1) 4px solid;
		border-radius:5px;
		padding:20px;
		background:#f2f2f2;
		
		grid-template-areas:"head" "body" "foot";
		gap:50px;
		
		> ._head{
			text-align:center;
			font-weight:bold;
			font-size:20px;
		}
		> ._body{
			.message{
				text-align:center;
				font-size:20px;
				margin:20px;
			}

		}
		> ._foot{}
	}
}