@use "sass:math";
@use "../../../010-settings/" as s;
@use "../../../010-settings/legacy-settings/legacy-settings_menu" as t-menu;
@use "../../../010-settings/legacy-settings/legacy-settings_form" as s-form;
@use "../../../030-tools/legacy-bootstrap-mixins/nav-divider" as t-ndiv;
@use "../../../030-tools/_tool_browser-prefixes" as t-ven;
@use "../../../050-layout/basics" as l;

// section based on bootstrap 3 - see /templates/default/Guidelines_SCSS-Coding.md
//
// Dropdown menus
// --------------------------------------------------

$zindex-dropdown:          1000 !default;

$dropdown-bg: s.$il-main-bg !default;
$dropdown-link-color: s.$il-text-color !default;
$dropdown-link-hover-color: s.$il-text-hover-color !default;
$dropdown-link-hover-bg: s.$il-highlight-bg !default;
$dropdown-border: s.$il-main-border-color !default;
//** Divider color for between dropdown items.
$dropdown-divider-bg:            #e5e5e5 !default;

//** Dropdown link text color.
$dropdown-link-color:            $gray-dark !default;
//** Hover color for dropdown links.
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
//** Hover background for dropdown links.
$dropdown-link-hover-bg:         #f5f5f5 !default;

//** Active dropdown menu item text color.
$dropdown-link-active-color:     s.$il-text-color-invert !default;
//** Active dropdown menu item background color.
$dropdown-link-active-bg:        s.$il-main-color !default;

//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color:   s.$il-neutral-light-color !default;

//** Text color for headers within dropdown menus.
$dropdown-header-color:          s.$il-neutral-light-color !default;

$cursor-disabled: not-allowed !default;


// Dropdown arrow/caret
.caret {
	display: inline-block;
	vertical-align: middle;
	border-top: s.$il-caret-width-base dashed;
	border-top: s.$il-caret-width-base solid \9; // IE8
	border-right: s.$il-caret-width-base solid transparent;
	border-left: s.$il-caret-width-base solid transparent;
  }

  // The dropdown wrapper (div)
  .dropup,
  .dropdown {
	position: relative;
	display: inline-block; // so dropdown can be in one line with a button
	min-width: max-content;
  }

  // The dropdown menu (ul)
  .dropdown-menu {
	  width: 320px;
	position: absolute;
	top: 100%;
	z-index: $zindex-dropdown;
	display: none; // none by default, but block on "open" of the menu
	float: left;
	overflow: auto;
	min-width: 160px;
	max-height: 50vh;
	padding: l.$il-padding-large-vertical 0;
	margin: l.$il-margin-small-vertical 0 0; // override default ul
	font-size: s.$il-font-size-base;
	text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
	list-style: none;
	background-color: $dropdown-bg;
	background-clip: padding-box;
	border: 1px solid $dropdown-border;
	border-radius: s.$il-border-radius-base;
	@include t-ven.box-shadow(0 6px 12px rgba(0, 0, 0, .175));

	// Aligns the dropdown menu to right
	//
	// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
	&.pull-right {
	  right: 0;
	  left: auto;
	}

	&.dropdown-menu__right {
	  right: auto;
	  left: 0;
	}
	&.dropdown-menu__left {
	  right: 0;
	  left: auto;
	}
	

	// Dividers (basically an hr) within the dropdown
	.divider {
	  @include t-ndiv.nav-divider($dropdown-divider-bg);
	}
	hr {
		margin: l.$il-margin-large-vertical 0;
	}

	// Use some dropdown menu styles for ul in the field selection element only
	> .dropdown-menu-list {
	  padding: l.$il-padding-large-vertical 0;
	  margin: l.$il-margin-small-vertical 0 0; // override default ul
	  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
	  list-style-type: none;
	}
  }

  // Active state
  .dropdown-menu > .active > a {
	&,
	&:hover,
	&:focus {
	  color: $dropdown-link-active-color;
	  text-decoration: none;
	  background-color: $dropdown-link-active-bg;
	  outline: 0;
	}
  }

  // Disabled state
  //
  // Gray out text and ensure the hover/focus state remains gray

  .dropdown-menu > .disabled > a {
	&,
	&:hover,
	&:focus {
	  color: $dropdown-link-disabled-color;
	}

	// Nuke hover/focus effects
	&:hover,
	&:focus {
	  text-decoration: none;
	  cursor: $cursor-disabled;
	  background-color: transparent;
	  background-image: none; // Remove CSS gradient
	  // @include reset-filter;
	}
  }

  // Open state for the dropdown
  .open {
	// Show the menu
	> .dropdown-menu {
	  display: block;
	}

	// Remove the outline when :focus is triggered
	> a {
	  outline: 0;
	}
  }

  // Menu positioning
  //
  // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
  // menu with the parent.
  .dropdown-menu-right {
	right: 0;
	left: auto; // Reset the default from `.dropdown-menu`
  }
  // With v3, we enabled auto-flipping if you have a dropdown within a right
  // aligned nav component. To enable the undoing of that, we provide an override
  // to restore the default dropdown menu alignment.
  //
  // This is only for left-aligning a dropdown menu within a `.navbar-right` or
  // `.pull-right` nav component.
  .dropdown-menu-left {
	right: auto;
	left: 0;
  }

  // Backdrop to catch body clicks on mobile, etc.
  .dropdown-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: ($zindex-dropdown - 10);
  }

  // Right aligned dropdowns
  .pull-right > .dropdown-menu {
	right: 0;
	left: auto;
  }

  // Allow for dropdowns to go bottom up (aka, dropup-menu)
  //
  // Just add .dropup after the standard .dropdown class and you're set, bro.
  // TODO: abstract this so that the navbar fixed styles are not placed here?

  .dropup,
  .navbar-fixed-bottom .dropdown {
	// Reverse the caret
	.caret {
	  content: "";
	  border-top: 0;
	  border-bottom: s.$il-caret-width-base dashed;
	  border-bottom: s.$il-caret-width-base solid \9; // IE8
	}
	// Different positioning for bottom up menu
	.dropdown-menu {
	  top: auto;
	  bottom: 100%;
	  margin-bottom: 2px;
	}
  }


.dropdown-header {
	padding: 3px 10px;
	color: s.$il-text-color;
	background-color: t-menu.$dropdown-header-bg;
	margin-bottom: 4px;
	border-bottom: 1px solid s.$il-main-border-color;
	> h2 {
		margin-top: math.div(l.$grid-gutter-width, 2);
		margin-bottom: l.$il-margin-xs-vertical;
		font-size: s.$il-font-size-large;
	}
}
.dropdown-menu {
	background-color: $dropdown-bg;
	font-weight: s.$il-font-weight-base;
	border: 0 none;
	@include t-ven.box-shadow(t-menu.$il-dropdown-shadow);
	// in repo "add object" dropdown
	.row {
		margin-bottom: math.div(l.$grid-gutter-width, 2);
		> ul[class*="col-"] {
			padding-left: math.div(l.$grid-gutter-width, 2);
		}
	}
	// Menu items within the dropdown menu
	// TO DO: this would be better as a reusable menu pattern tool
	li a,
	li .btn-link {
		display: flex;
		align-items: center;
		width: 100%;
		border: none;
		font-weight: s.$il-font-weight-base;
		font-size: t-menu.$il-font-size-dropdown;
		line-height: s.$il-line-height-base;
		background-color: t-menu.$dropdown-link-bg;
		color: $dropdown-link-color;
		min-height: s-form.$il-input-min-height;
		width: 100%;
		padding: l.$il-padding-small-vertical l.$il-padding-xlarge-horizontal;
		justify-content: start;
		white-space: nowrap;
		&:hover,
		&:focus {
			color: $dropdown-link-hover-color;
			background-color: $dropdown-link-hover-bg;
			text-decoration: none;
		}
		&[disabled] {
			background-color: s.$il-disabled-btn-bg;
		}
	}
	img {
		border: 0;
		width: 22px;
		height: 22px;
		margin: 0 3px 0 0;
		display: t-menu.$il-nav-icons;
	}
}

// must be like dropdown-menu img
.ilAdvNoImg {
	display: inline-block;
	width: 22px;
}
.yamm .dropdown-menu {
	li > a {
		white-space: normal;
	}
}

.btn-group.open .dropdown-toggle {
    @include t-ven.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
}

// end of section based on bootstrap 3

//== DropDowns
//
//##

.dropdown h4 {
	margin: l.$il-margin-base-vertical 0;
}

//Note, this is a rather nasty fix for #27751
//Should be removed in upcoming version
.il-maincontrols-slate-content{
	.dropdown-menu{
		right: 0;
		left: inherit;
	}
}