.bn-dropdown__wrapper {
	--bn-dropdown__toggle-button_width: 32px;
	--bn-dropdown__drop_v-padding: 8px;
	--bn-dropdown__drop-wrapper_width: auto;
	--bn-dropdown__drop-wrapper_max-height: auto;
	--bn-dropdown__drop_z-index: 1;
	--bn-dropdown__wrapper_margin: 0;
	--bn-dropdown_height: initial;
	--bn-dropdown_width: initial;
	--bn-dropdown__wrapper_height: initial;
	--bn-dropdown__wrapper_width: initial;

	box-sizing: border-box;
	cursor: pointer;
	border: none;
	border-radius: var(--bn-border-radius);
	display: inline-block;
	height: var(--bn-dropdown__wrapper_height);
	width: var(--bn-dropdown__wrapper_width);
	position: relative;
	vertical-align: middle;
	transition-duration: var(--bn-animation);
	transition-property: border-color, box-shadow, background-color, height;
}

.bn-dropdown__wrapper:has(.bn-dropdown__toggle-button) {
	padding-right: var(--bn-dropdown__toggle-button_width);
}

.bn-dropdown__drop-wrapper {
	box-sizing: border-box;
	cursor: default;
	max-height: var(--bn-dropdown__drop-wrapper_max-height);
	min-width: 100%;
	opacity: 0;
	padding-top: var(--bn-dropdown__drop_v-padding);
	position: absolute;
	transform: scaleY(0);
	width: var(--bn-dropdown__drop-wrapper_width);
	z-index: var(--bn-dropdown__drop_z-index);

	transition-duration: var(--bn-animation);
	transition-property: transform, opacity, box-shadow;
}

/* Класс для временного открытия выпадающего списка чтобы снять его размеры в JS */
.bn-dropdown__drop-wrapper_test-open {
	transition: none;
	transform: scaleY(1);
}

.bn-dropdown__drop-wrapper_position_bottom {
	top: 100%;
	padding-top: var(--bn-dropdown__drop_v-padding);
	padding-bottom: var(--bn-dropdown__wrapper_margin);
	transform-origin: top;
}

.bn-dropdown__drop-wrapper_position_top {
	bottom: 100%;
	padding-top: var(--bn-dropdown__wrapper_margin);
	padding-bottom: var(--bn-dropdown__drop_v-padding);
	transform-origin: bottom;
}

.bn-dropdown__drop-wrapper_position_left {
	left: 0;
}

.bn-dropdown__drop-wrapper_position_right {
	right: 0;
}

.bn-dropdown {
	box-sizing: border-box;
	height: var(--bn-dropdown_height);
	width: var(--bn-dropdown_width);
}

.bn-dropdown__drop {
	background-color: rgb(var(--color-white));
	border: none;
	border-radius: var(--bn-border-radius);
	box-shadow: none;
	box-sizing: border-box;
	max-height: calc(var(--bn-dropdown__drop-wrapper_max-height) - var(--bn-dropdown__drop_v-padding) - var(--bn-dropdown__wrapper_margin));
	min-width: 100%;
	overflow: hidden;
	width: max-content;
}

.bn-dropdown_opened .bn-dropdown__drop-wrapper {
	opacity: 1;
	transform: scaleY(1);
}

.bn-dropdown_opened .bn-dropdown__drop {
	box-shadow: rgba(var(--color-black), 0.2) 0 0 12px 0;
}

.bn-dropdown__toggle-button {
	/*background-color: rgba(255, 0,0,0.1);*/
	border-radius: 0 var(--bn-border-radius) var(--bn-border-radius) 0;

	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	width: var(--bn-dropdown__toggle-button_width);
}

.bn-dropdown__toggle-button-icon {
	background-image: url("/static/ui/bn/icon/chevron-down-accent.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;

	height: 100%;
	width: 100%;
	transform: scaleY(1);
	transition-duration: var(--bn-animation);
	transition-property: transform;
}

.bn-dropdown_opened .bn-dropdown__toggle-button-icon {
	transform: scaleY(-1);
}