$dropdown-bd-color: $co-gray-70;
$dropdown-spacer: .2rem;
$dropdown-padding-v: $sp-2;

.dropup,
.dropend,
.dropdown,
.dropstart {
	position: relative;
}

.dropdown-toggle {
	white-space: nowrap;
}

.dropdown-menu {
	position: absolute;
	z-index: $z-index-dropdown;
	display: none;
	min-width: 20rem;
	padding: $dropdown-padding-v 0;
	margin: 0;
	color: var(--text-color);
	text-align: left;
	list-style: none;
	background-color: var(--co-gray-90);
	// border: 1px solid $co-gray-70;
	@if $useBorderRadius { border-radius: $border-radius-2;}
	box-shadow: $shadow-sm-v;

	&[data-bs-popper] {
		top: 100%;
		left: 0;
		margin-top: $dropdown-spacer;
	}
}

@if false {
	// scss-docs-start responsive-breakpoints
	// We deliberately hardcode the `bs-` prefix because we check
	// this custom property in JS to determine Popper's positioning

	@each $breakpoint in map-keys($grid-breakpoints) {
		// deleted
	}
	// scss-docs-end responsive-breakpoints
}

.dropup {
	.dropdown-menu[data-bs-popper] {
		top: auto;
		bottom: 100%;
		margin-top: 0;
		margin-bottom: $dropdown-spacer;
	}
}

.dropend {
	.dropdown-menu[data-bs-popper] {
		top: 0;
		right: auto;
		left: 100%;
		margin-top: 0;
		margin-left: $dropdown-spacer;
	}
}

.dropstart {
	.dropdown-menu[data-bs-popper] {
		top: 0;
		right: 100%;
		left: auto;
		margin-top: 0;
		margin-right: $dropdown-spacer;
	}
}

.dropdown-divider {
	display: block;
	height: 1px;
	margin: $sp-2 0;
	overflow: hidden;
	border-top: 1px solid var(--co-muted);
}

.dropdown-item {
	display: block;
	width: 100%; // For `<button>`s
	padding: $sp-2 $sp-4;
	clear: both;
	font-weight: $font-weight-base;
	color: var(--text-color);
	text-align: inherit; // For `<button>`s
	text-decoration: none;
	white-space: nowrap; // prevent links from randomly breaking onto new lines
	background-color: transparent; // For `<button>`s
	border: 0; // For `<button>`s

	@if false {
		// Prevent dropdown overflow if there's no padding
		// See https://github.com/twbs/bootstrap/pull/27703
		@if $dropdown-padding-y == 0 {
			&:first-child {
				@include border-top-radius($dropdown-inner-border-radius);
			}

			&:last-child {
				@include border-bottom-radius($dropdown-inner-border-radius);
			}
		}
	}

	&:hover,
	&:focus {
		color: $co-alpha;
		text-decoration: none;
	}

	&.show,
	&.active,
	&:active {
		color: $co-alpha;
		text-decoration: none;
	}

	@if false {
		&.disabled,
		&:disabled {
			color: $dropdown-link-disabled-color;
			pointer-events: none;
			background-color: transparent;
		}
	}
}

.dropdown-menu.show {
	display: block;
}

.dropdown-item-text {
	display: block;
	padding: $sp-1 $sp-4;
	// color: $text-color;
}

@if false {
	.dropdown-header {
		display: block;
		padding: $dropdown-header-padding;
		margin-bottom: 0; // for use with heading elements
		@include font-size($font-size-sm);
		color: $dropdown-header-color;
		white-space: nowrap; // as with > li > a
	}

	.dropdown-menu-dark {
		color: $dropdown-dark-color;
		background-color: $dropdown-dark-bg;
		border-color: $dropdown-dark-border-color;
		@include box-shadow($dropdown-dark-box-shadow);

		.dropdown-item {
			color: $dropdown-dark-link-color;

			&:hover,
			&:focus {
				color: $dropdown-dark-link-hover-color;
				@include gradient-bg($dropdown-dark-link-hover-bg);
			}

			&.active,
			&:active {
				color: $dropdown-dark-link-active-color;
				@include gradient-bg($dropdown-dark-link-active-bg);
			}

			&.disabled,
			&:disabled {
				color: $dropdown-dark-link-disabled-color;
			}
		}

		.dropdown-divider {
			border-color: $dropdown-dark-divider-bg;
		}

		.dropdown-item-text {
			color: $dropdown-dark-link-color;
		}

		.dropdown-header {
			color: $dropdown-dark-header-color;
		}
	}
}

// EXTRAS
.dropdown-menu-content {
	padding: $sp-4;
	min-width: 32rem;
}

.dropdown-menu {
	> .dropend,
	> .dropstart {
		> .dropdown-menu {
			margin-top: -($dropdown-padding-v + .1rem) !important;
		}
	}
}

.dropdown-lang {
	.dropdown-menu {
		min-width: 6rem;
		text-align: center;
	}
}

.dropdown-confirm {
	position: relative;
	.dropdown-menu {
		padding: .1rem !important;
		inset: 0 0 auto auto !important;
		transform: none !important;
		min-width: fit-content !important;
		border-radius: .4rem;
	}
	.dropdown-menu.show {
		display: flex;
	}
}

.dropdown-thumb-fima {
	.dropdown-toggle {
		vertical-align: middle;
	}
	&.is-audio {
		.dropdown-menu-content {
			min-width: 1rem;
		}
	}
	.dropdown-menu-content {
		min-width: max-content;
	}
}

.dropdown-multiselect {
	.dropdown-menu {
		max-height: 32.5vh;
		max-width: 90vw;
		overflow: auto;
		overscroll-behavior: contain;

		@include scrollBar();

		> .has-filter {
			position: sticky;
			top: 0;
			z-index: 1;
			padding: $sp-2 $sp-4;
			background-color: var(--co-gray-90);
		}
	}
}