.bn-select_skip {}

.bn-select,
.bn-select__wrapper {
	/*--bn-select_height: var(--bn-height_m);*/
	--bn-select_height: var(--bn-dropdown_height, var(--bn-height_m));
	/*--bn-select_width: initial;*/
	--bn-select_width: var(--bn-dropdown_width, initial);
	--bn-select_padding-left: 12px;
	--bn-select_padding-right: 12px;
	--bn-select_color: var(--bn-color_black);
	--bn-select__placeholder-color: var(--bn-color_dark-grey);
	--bn-select_font-size: var(--bn-font-size_m);
	--bn-select__option-height: var(--bn-height_s);

	background-color: #ffffff;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 100px rgba(var(--bn-select_color), 0.05);
	color: rgb(var(--bn-select_color));
	cursor: pointer;
	border: none;
	border-radius: var(--bn-border-radius);
	font-size: var(--bn-select_font-size);
	position: relative;
	vertical-align: middle;
	transition-duration: var(--bn-animation);
	transition-property: border-color, box-shadow, background-color, height;

	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/*.bn-dropdown__wrapper .bn-select {
	--bn-select_height: var(--bn-dropdown_height, var(--bn-height_m));

}*/

.bn-select {
	appearance: none;
	height: var(--bn-select_height);
	line-height: var(--bn-select_height);
	min-width: 50px;
	width: var(--bn-select_width);
	padding: 0 var(--bn-select_padding-right) 0 var(--bn-select_padding-left);

	background-image: url("/static/ui/bn/icon/chevron-down-accent.svg");
	background-repeat: no-repeat;
	background-position: right calc((var(--bn-select_padding-right) - 11px) / 2) center;
	background-size: 11px;
}

.bn-select:not(.bn-dropdown) {
	--bn-select_padding-right: 32px;
}

.bn-select[multiple].bn-select_skip {
	background-image: none;
}

.bn-select:not(:disabled):hover,
.bn-select__wrapper:hover:has(.bn-select:not(:disabled)) {
	box-shadow: inset 0 0 0 100px rgba(var(--bn-select_color), 0.10);
}

.bn-select:focus,
.bn-select__wrapper:focus:has(.bn-select:not(:disabled)),
.bn-select_opened {
	box-shadow: inset 0 0 0 100px rgba(var(--bn-select_color), 0.10);
	outline: none; /* Removes the default browser outline on click/touch */
	cursor: pointer;
}

.bn-select:focus-visible,
.bn-select__wrapper:focus-visible {
	outline: none;
}

.bn-select:disabled,
.bn-select__wrapper:has(.bn-select:disabled),
.bn-select__option:has(.bn-select__checkbox:disabled) {
	color: rgba(var(--bn-select_color), 0.25);
	cursor: not-allowed;
}

.bn-select__wrapper .bn-select {
	margin-right: calc(-1 * var(--bn-dropdown__toggle-button_width));
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

.bn-select__placeholder {
	color: rgba(var(--bn-select__placeholder-color), 1);

	/*height: var(--bn-select_height);*/
	display: flex;
	align-items: center;
	position: absolute;
	left: var(--bn-select_padding-left);
	right: var(--bn-dropdown__toggle-button_width);
	top: 0;
	bottom: 0;
	/*background-color: rgba(255, 0,0,0.3);*/
	pointer-events: none;
	transition-duration: var(--bn-animation);
	transition-property: font-size, bottom, top;
}

.bn-select_selected .bn-select__placeholder {
	color: rgb(var(--bn-select_color));
}

.bn-select__wrapper:has(.bn-select:disabled) .bn-select__placeholder {
	color: rgba(var(--bn-select__placeholder-color), 0.5);
}

.bn-select__placeholder-text {
	display: inline-block;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	line-height: var(--bn-select_height);
}

.bn-select__placeholder-selected-cnt {
	color: rgb(var(--bn-color_accent));
}

.bn-select__dropdown-container {
	--bn-select_dropdown-max-height: auto;
	--bn-select_dropdown-width: auto;
	--bn-select_dropdown-v-padding: 8px;

	background-color: rgb(var(--color-white));
	border: none;
	box-sizing: border-box;
	cursor: default;
	display: grid;
	grid-template-rows: 1fr;
	min-width: 100%;
	max-height: inherit;
	overflow: hidden;
	padding: var(--bn-select_dropdown-v-padding) 0;
	width: max-content;

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

.bn-select__dropdown-container:has(.bn-select__search) {
	grid-template-rows: max-content 1fr;
}

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

.bn-select__dropdown-container_position_bottom {
	top: var(--bn-select_height);
	padding-top: var(--bn-select_dropdown-v-padding);
	transform-origin: top;
}

.bn-select__dropdown-container_position_top {
	bottom: var(--bn-select_height);
	padding-top: 0;
	padding-bottom: var(--bn-select_dropdown-v-padding);
	transform-origin: bottom;
}

.bn-select__dropdown-container_position_left {
	left: 0;
}

.bn-select__dropdown-container_position_right {
	right: 0;
}

.bn-select__options {
	list-style: none;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	max-height: max-content;
}

.bn-select__options_scroll {
	/*margin-right: calc(var(--bn-select_padding-left) / 2);*/
}

.bn-select__option {
	line-height: var(--bn-select__option-height);
	height: var(--bn-select__option-height);
	white-space: nowrap;
}

.bn-select__option_hidden,
.bn-select__option_filtered-out {
	display: none;
}

.bn-select__option-label,
.bn-select__option_not-found {
	cursor: pointer;
	display: block;
	line-height: inherit;
	height: inherit;
	padding-left: var(--bn-select_padding-left);
	padding-right: var(--bn-select_padding-right);

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

.bn-select__option-label:hover,
.bn-select__option_selected .bn-select__option-label {
	box-shadow: inset 0 0 0 100px rgba(var(--bn-select_color), 0.10);
}

.bn-select__option_not-found {
	cursor: default;
	line-height: var(--bn-select__option-height);
	height: var(--bn-select__option-height);
}

.bn-select__wrapper:has(.bn-select:not([multiple])) .bn-select__checkbox {
	display: none;
}

.bn-select__search {
	padding-left: calc(var(--bn-select_padding-left) / 2);
	padding-right: calc(var(--bn-select_padding-right) / 2);
	margin-bottom: calc(var(--bn-select_padding-right) / 2);
}

.bn-select__search .bn-input__wrapper {
	display: block;
}

.bn-select__search-input {
	width: 100%;
}