/**
 * UI - Vars
 *
 * Thses apply values to the UI._elements.css
 */
:root{
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* colors */
body{ 
	--clr-red-1:    #e8312a; 
	--clr-orange-1: #ffca05; 
	--clr-grey-1:   #555555;
	--clr-grey-2:   #999999;
	--clr-white-1:  #fff;
	--clr-black-1:  #000;
}
.ui_dialog{ /* ui_dialog */
	--ui_dialog--borderRadius: 0;
	--ui_dialog--borderWidth:  2px;
	--ui_dialog--padding:      0;
	--ui_dialog--bgColor:      var(--clr-white-1);
	--ui_dialog--bordercolor:  var(--clr-grey-2);
	--ui_dialog_head--padding:          15px;
	--ui_dialog_head--borderBottom:     var(--clr-grey-2) 1px solid;
	--ui_dialog_head--backgroundColor:  var(--clr-white-1);
	--ui_dialog_head_title--color:       var(--clr-grey-1);
	--ui_dialog_head_title--fontWeight:  bold;
	--ui_dialog_head_title--fontSize:    18px;
	--ui_dialog_body--padding:          30px 15px;
	--ui_dialog_body--borderBottom:     var(--clr-grey-2) 1px solid;
	--ui_dialog_body--backgroundColor:  var(--clr-white-1);
}
.ui_panel{/* ui_panel */
	--ui_panel--borderRadius: 0;
	--ui_panel--borderWidth:  2px;
	--ui_panel--padding:      10px 0;
	--ui_panel--bgColor:      var(--clr-white-1);
	--ui_panel--bordercolor:  var(--clr-grey-2);
	--ui_panel_head--padding:          15px;
	--ui_panel_head--borderBottom:     var(--clr-grey-1) 1px solid;
	--ui_panel_head--backgroundColor:  var(--clr-white-1);
	--ui_panel_head_title--color:       var(--clr-grey-1);
	--ui_panel_head_title--fontWeight:  bold;
	--ui_panel_head_title--fontSize:    18px;
	--ui_panel_body--padding:          30px 15px;
	--ui_panel_body--borderBottom:     var(--clr-grey-2) 1px solid;
	--ui_panel_body--backgroundColor:  var(--clr-white-1);
	--ui_panel_body--gap:              15px;
}
.ui_select{ /* ui_select */
	--ui_select--borderRadius: 3px;
	--ui_select--borderWidth  :1px;
	--ui_select--padding:      5px 10px;
	--ui_select--fontSize:     14px;
	--ui_select--fontWeight:   bold;
	--ui_select--textTransform:normal;
	--ui_select--bgColor:       var(--clr-red-1);
	--ui_select--borderColor:   var(--clr-white-1);
	--ui_select--color:         var(--clr-white-1);
	--ui_select-hover--bgColor:     var(--clr-red-1);
	--ui_select-hover--borderColor: var(--clr-red-1);
	--ui_select-hover--color:       var(--clr-white-1);
	--ui_select-focus--bgColor:     var(--clr-red-1);
	--ui_select-focus--borderColor: var(--clr-red-1);
	--ui_select-focus--color:       var(--clr-white-1);
}
.ui_button{	/* ui_button */
	--ui_button--borderRadius: 0;
	--ui_button--borderWidth  :1px;
	--ui_button--padding:      5px 12px;
	--ui_button--fontWeight:   bold;
	--ui_button--fontSize:     14px;
	--ui_button--textTransform:normal;
	--ui_button--bgColor:       var(--clr-red-1);
	--ui_button--borderColor:   var(--clr-white-1);
	--ui_button--color:         var(--clr-white-1);
	--ui_button-hover--bgColor:     var(--clr-red-1);
	--ui_button-hover--borderColor: var(--clr-red-1);
	--ui_button-hover--color:       var(--clr-white-1);
	--ui_button-focus--bgColor:       var(--clr-red-1);
	--ui_button-focus--borderColor:   var(--clr-white-1);
	--ui_button-focus--color:         var(--clr-white-1);
	--ui_button-active--bgColor:     var(--clr-white-1);
	--ui_button-active--borderColor: var(--clr-white-1);
	--ui_button-active--color:       var(--clr-red-1);
	--ui_button-inactive--bgColor:     var(--clr-grey-1);
	--ui_button-inactive--borderColor: var(--clr-grey-1);
	--ui_button-inactive--color:       var(--clr-white-1);
	--ui_button-inactive--opacity:     0.5;
}
.ui_filter-by-dialog{ /* ui_filter : by-dialog */
	--ui_filterByDialog_head--backgroundColor: var(--clr-white-1);
	--ui_filterByDialog_head--border:          var(--clr-grey-2) 1px solid;
	--ui_filterByDialog_head--gap:             5px;
	--ui_filterByDialog_head--padding:         0 0 0 5px;
}
.ui_filter{
	--ui_filter_name--color:var(--clr-grey-1);
	--ui_filter_name--fontSize: 15px;
	--ui_filter_name--fontWeight:bold;
}
.ui_foregroud{
	--ui_foregroud--background:rgba(255,255,255,0.8);
}
.ui_removables{
	.ui_removable-item{
		--ui_removableItem--backgroundColor: var(--clr-white-1);
		--ui_removableItem--border:          var(--clr-red-1) 1px solid;
		--ui_removableItem--borderRadius:    0;
		--ui_removableItem--gap:             5px;
		--ui_removableItem--padding:         5px;
		--ui_removableItem_name--color:      var(--clr-red-1);
		--ui_removableItem_name--fontSize:   13px;
		--ui_removableItem_name--fontWeight: normal;
		--ui_removableItem_info--color:      var(--clr-red-1);
		--ui_removableItem_info--fontSize:   13px;
		--ui_removableItem_info--fontWeight: italic;
		--ui_removableItem_icon--color:      var(--clr-red-1);
		--ui_removableItem_icon--fontSize:   13px;
		--ui_removableItem_icon--fontWeight: normal;
		&:hover{
			--ui_removableItem-hover--borderColor:     var(--clr-red-1);
			--ui_removableItem-hover--backgroundColor: var(--clr-red-1);
			--ui_removableItem-hover_name--color:      var(--clr-white-1);
			--ui_removableItem-hover_icon--color:      var(--clr-white-1);
			--ui_removableItem-hover_info--color:      var(--clr-white-1);
		&[data-active="false"],
		&[data-active="false"]:hover{
			--ui_removableItem-inactive--borderColor:     var(--clr-grey-1);
			--ui_removableItem-inactive--backgroundColor: var(--clr-white-1);
			--ui_removableItem-inactive_name--color:      var(--clr-grey-1);
			--ui_removableItem-inactive_icon--display:    var(--clr-white-1);
			--ui_removableItem-inactive_info--color:      var(--clr-grey-1);
			cursor:pointer;
		}
	}
}