.kb-input-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;

	.kb-input-label {
		color: $neutral-600;
		font-size: $font-size-body-xxs;
	}
	
	select.kb-input {
		appearance: none;       /* Для большинства браузеров */
		-webkit-appearance: none; /* Safari */
		-moz-appearance: none;    /* Firefox */
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 6C5.05134 7.45386 6.28196 8.7576 7.65992 9.87811C7.85978 10.0406 8.14022 10.0406 8.34008 9.87811C9.71804 8.7576 10.9487 7.45386 12 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		background-repeat: no-repeat;
		background-position: calc(100% - 8px) 11px;
		background-size: 16px;
	}

	.kb-input {
		padding: 8px;
		width: 100%;
		border: 0;
		position: relative;
		z-index: 1;
		border-bottom: 2px solid transparent;
		outline: none;
		background: $neutral-100;

		transition: border-bottom-color .2s;

		&:focus, &:focus-visible {
			outline: none;
			border-bottom-color: $primary-1;
		}
	}

	.kb-input-container {
		width: 100%;
		position: relative;

		.prefix {
			position: absolute;
			z-index: 2;
			padding: 6px;
			display: flex;
			flex-direction: row;
			gap: 4px;
			align-items: center;

			.sep {
				width: 1px;
				height: 22px;
				background: $neutral-500-25;
			}
		}

		.prefix + .kb-input {
			padding-left: 69px;
		}
	}
}

.kb-form-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}