.bn-input_skip {}

.bn-input,
.bn-input__wrapper {
	--bn-input_padding-left: 12px;
	--bn-input_padding-right: 12px;
	--bn-input_padding-right-total: var(--bn-input_padding-right);
	--bn-input_color: var(--bn-color_black);
	--bn-input__placeholder-color: var(--bn-color_dark-grey), 1;
	--bn-input__placeholder-height: 14px;
	--bn-input__close-button-width: 16px;
	--bn-input_height: var(--bn-height_m);
	--bn-input_width: initial;
	--bn-input__wrapper_height: initial;
	--bn-input__wrapper_width: initial;

	border: none;
	border-radius: var(--bn-border-radius);
	box-sizing: border-box;
	font-size: var(--bn-font-size_m);
	vertical-align: middle;
}

.bn-input__wrapper {
	--bn-input-padding-top: 0;

	display: inline-block;
	position: relative;
	height: var(--bn-input__wrapper_height);
	width: var(--bn-input__wrapper_width);
}

/* Костыль для выравнивания элементов по горизонтали */
.bn-input__wrapper:has(.bn-input_filled:not(.bn-input__placeholder_empty)) {
	--bn-input-padding-top: calc(var(--bn-input_height) / 2 - 2px);
	/*top: calc(var(--bn-input-padding-top) / 2);*/
	/*margin-top: calc(var(--bn-input-padding-top) * -1);;*/
}

.bn-input {
	background-color: #FFFFFF;
	box-shadow: inset 0 0 0 100px rgba(var(--bn-input_color), 0.05);
	color: rgb(var(--bn-input_color));
	cursor: text;
	height: var(--bn-input_height);
	line-height: var(--bn-input_height);
	padding: 0 var(--bn-input_padding-right-total) 0 var(--bn-input_padding-left);
	transition-duration: var(--bn-animation);
	transition-property: border-color, box-shadow, background-color, height, padding;
	width: var(--bn-input_width);
}

.bn-input__wrapper .bn-input {
	/*display: flex;*/
	padding-top: var(--bn-input-padding-top);
}

.bn-input_size_s,
.bn-input__wrapper:has(.bn-input_size_s) {
	--bn-input_height: var(--bn-height_s);
}

.bn-input_size_l,
.bn-input__wrapper:has(.bn-input_size_l) {
	--bn-input_height: var(--bn-height_l);
}

.bn-input:not(:disabled):hover,
.bn-input__wrapper:hover .bn-input:not(:disabled) {
	box-shadow: inset 0 0 0 100px rgba(var(--bn-input_color), 0.10);
}

.bn-input_success,
.bn-input__wrapper:has(.bn-input_success) {
	--bn-input_color: var(--bn-color_green);
	--bn-input__placeholder-color: var(--bn-color_green), 0.6;
}

.bn-input_error,
.bn-input:invalid,
.bn-input__wrapper:has(.bn-input_error),
.bn-input__wrapper:has(.bn-input:invalid) {
	--bn-input_color: var(--bn-color_red);
	--bn-input__placeholder-color: var(--bn-color_red), 0.6;
}

.bn-input:focus {
	box-shadow: inset 0 0 0 100px rgba(var(--bn-input_color), 0.10);
	outline: none; /* Removes the default browser outline on click/touch */
}

.bn-input:focus-visible {
	outline: none;
}

.bn-input:disabled {
	color: rgba(var(--bn-input_color), 0.25);
	box-shadow: inset 0 0 0 100px rgba(var(--bn-input_color), 0.05);
	cursor: not-allowed;
}

.bn-input::placeholder,
.bn-input__placeholder {
	color: rgba(var(--bn-input__placeholder-color));
}

/* Сокрытие оригинального плейсхолдера для обернутого поля ввода */
.bn-input__wrapper .bn-input::placeholder {
	color: transparent;
}

.bn-input__placeholder {
	display: flex;
	align-items: center;
	position: absolute;
	left: var(--bn-input_padding-left);
	right: var(--bn-input_padding-right-total);
	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, right, left;
}

/*.bn-input_filled:not(.bn-input__placeholder_empty) {
	padding-top: var(--bn-input-padding-top);
}*/

.bn-input_filled ~ .bn-input__placeholder {
	font-size: 12px;
	top: calc(50% - var(--bn-input__placeholder-height));
	bottom: calc(50% + 2px);
}

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

.bn-input_show-clear-button .bn-input,
.bn-input_show-clear-button {
	--bn-input_padding-right-total: calc(var(--bn-input_padding-right) + var(--bn-input__close-button-width));
}

.bn-input__clear-button {
	/*background: lime;*/
	background-image: url("/static/ui/bn/icon/cross-black.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	cursor: pointer;
	border-radius: 0 var(--bn-border-radius) var(--bn-border-radius) 0;
	display: none;
	opacity: 0.7;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: var(--bn-input_padding-right-total);

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

.bn-input__clear-button:hover {
	opacity: 1;
}

.bn-input_show-clear-button .bn-input__clear-button {
	display: block;
}

.bn-input:disabled ~ .bn-input__clear-button,
.bn-input:read-only ~ .bn-input__clear-button {
	cursor: not-allowed;
	opacity: 0.3;
}