@use "../../../010-settings/" as *;
@use "../../../010-settings/legacy-settings/legacy-settings_panel" as *;

@use "../../../020-dependencies/modifications/webui-popover/jquery.webui-popover.scss" as *;

//== Popover
//
//## Customizes the Popover component

//** Minimal width of the Popover
$il-popover-min-width: 50px;
//** Minimal height of the Popover
$il-popover-min-height: 32px;
//** Maximal width of the Popover
$il-popover-max-width: 400px;
//** Background color of the Popover
$il-popover-background-color: $il-main-dark-bg;
//** Background color of the title
$il-popover-title-background-color: $il-popover-background-color;
//** Border color of the Popover
$il-popover-border-color: rgba(0, 0, 0, .2);
//** Width of the arrow pointing from the Popover to its Triggerer component, e.g. a Button
$il-popover-arrow-width: 10px;
//** Background color of the arrow
$il-popover-arrow-background-color: $il-popover-background-color;
//** z-index used for the Popover
$il-popover-z-index: 9999;
//** Maximum Height of a popover (overflow scroll)
$il-popover-max-height: 500px;

$popover-bg: $il-popover-background-color;
$popover-min-width: $il-popover-min-width;
$popover-min-height: $il-popover-min-height;
$popover-border-color: $il-popover-border-color;
$popover-title-bg: $il-popover-title-background-color;
$popover-arrow-width: $il-popover-arrow-width;
$popover-arrow-color: $il-popover-arrow-background-color;
$popover-z-index: $il-popover-z-index;
$popover-max-height: $il-popover-max-height;
$popover-border-radius-base: 0px;
$popover-border-radius-large: 0px;
$popover-border-radius-small: 0px;

.il-popover {
  max-width: $il-popover-max-width;
  .webui-popover-content > div:first-child {
	width: 100%;
  }
  .il-popover-inner {
	max-height: $popover-max-height;
	overflow:   auto;
	.close {
	  margin: 0;
	  &::after {
		content: "";
		width:   0em;
		height:  0em;
		padding: 0;
	  }
	}
  }
  i.icon-refresh {
	background: url("#{$il-background-images-path}media/loading.gif") no-repeat;
	height:     30px;
  }

  .il-popover-title-container {
	background-color: $il-main-darker-bg;
	h4.il-popover-title {
	  font-size:        $il-font-size-large;
	  font-weight:      $il-font-weight-base;
	  padding:          8px 14px;
	  background-color: transparent;
	  text-transform:   none;
	  color:            $il-panel-heading-color;
	}

  }
  &.webui-popover {
	position: fixed;
  }
}