<commit_before>input,
textarea {
	appearance: none;
	width: 100%;
	min-width: $input-min-width;
	max-width: 100%;
	outline: none;
	font-size: inherit;
	background-color: $input-background;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
	padding: $input-padding-y $input-padding-x;
	flex: 1 1 auto;
	resize: vertical;
	vertical-align: bottom; // see listView demo

	&::placeholder {
		color: $input-placeholder-color;
	}

	&:focus {
		@include input-focus();
	}

	// keep this exactly here, do not move into .cui-input selector
	&.cui-input-shadow {
		position: absolute;
		display: block;
		padding: 0;
		border: none;
		top: -1000px;
		left: -1000px;
	}
}

input {
	height: $input-height;
	line-height: $input-height;

	&[type='file'] {
		height: auto;
		line-height: $line-height-base;
		padding: $input-padding-y;
		font-size: $font-size-sm;
	}
}

textarea {
	--textarea-min-rows: 1;

	resize: none; // todo: bad UI ?
	min-height: calc(#{$line-height-base} * 1em * var(--textarea-min-rows) + #{$spacer-xs} + 2px); // 16px: Line height, 6px: padding, 2px: border.
}


.cui-input {
	// state classes:
	// cui-input-invalid
	// cui-input-has-no-user-input
	// cui-input-has-user-input
	// cui-has-focus
	// cui-has-check-input
	//
	// hint:
	// cui-input-has-invalid-hint
	// cui-input-has-valid-hint
	// cui-input-has-input-hin:
	//

	&.cui-input-has-check-input {
		&.cui-input-invalid {
			input,
			.cui-data-field-right .cui-button .cui-button-visual {
				border-color: theme-color('danger');
				background: transparentize(theme-color('danger'), 0.85);
			}
		}
	}

	&.cui-maximize-vertical {
		display: flex;
		flex-direction: column;
	}

	// hint
	// + .cui-label {
	// 	@include form-hint();
	// }

	&-appearance-code {
		input,
		textarea {
			font-family: $font-family-monospace;
			font-size: $font-size-sm;
			color: $teal; // todo
			background: gray('900');
			border-color: gray('900');

			&:focus {
				border-color: gray('900');
			}
		}
	}
}

.cui-code-input pre {
	height: 400px;
	margin: auto;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
}

.cui-input-content-size {
	textarea {
		// min-height: 40px; // todo
		// height: 40px; // todo
		resize: none;
	}
}

// Multi input
.cui-multi-input .cui-multi-input-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: $input-min-width;
}

.cui-data-field-multi-input-center {
	flex: 1 1 auto;
}

.cui-data-field-multi-input-right {
	flex: 0 0 auto;
	vertical-align: top;
}

.cui-multi-input-input {
	position: relative;
	display: flex;
	max-width: 100%;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
	background-color: $input-background;

	+ .cui-multi-input-input {
		margin-top: $spacer-sm;
	}

	&:focus,
	&.cui-has-focus {
		@include input-focus();
	}

	&.cui-data-field-hidden {
		display: none !important;
	}

	.cui-input,
	.cui-textarea {
		width: 100% !important;
		border: none;
		background: none;
		border-radius: 0;
		min-width: 0; // so that the [DE | EN] doesn't move outside the input area

		@include disable-input-focus();
	}
}

.cui-multi-input-tag-button {
	@include input-control-button(22px, 18px);
}

// todo: test
.cui-browser-ie:not(.cui-browser-edge) {
	.cui-input {
		input,
		textarea {
			min-height: 24px;

			&[data-max-chars] {
				min-height: 22px;
			}
		}
	}

	.cui-multi-input-input {
		input,
		textarea {
			min-height: 22px;
		}
	}
}

// DateTime Input
.cui-date-time {
	.cui-input-invalid-hint {
		display: none;
	}

	.cui-input {
		min-width: 90px; // date-short
	}

	/*

	date: "dd, DD.MM.YYYY"
	date-short: "DD.MM.YYYY"
	date-time: "dd, DD.MM.YYYY HH:mm"
	date-time-short = "DD.MM.YYYY HH:mm"
	date-time-seconds: "dd, DD.MM.YYYY HH:mm:ss"
	date-time-seconds-short: "DD.MM.YYYY HH:mm:ss"

	*/

	&[data-cui-date-time-format='date'] .cui-input {
		min-width: 112px;
	}

	&[data-cui-date-time-format='date-time-short'] .cui-input {
		min-width: 129px;
	}

	&[data-cui-date-time-format='date-time'] .cui-input,
	&[data-cui-date-time-format='date-time-seconds-short'] .cui-input {
		min-width: 150px;
	}

	&[data-cui-date-time-format='date-time-seconds'] .cui-input {
		min-width: 175px;
	}
}
<commit_msg>CUI: input: fix textarea background color<commit_after>input,
textarea {
	appearance: none;
	width: 100%;
	min-width: $input-min-width;
	max-width: 100%;
	outline: none;
	font-size: inherit;
	background-color: $input-background;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
	padding: $input-padding-y $input-padding-x;
	flex: 1 1 auto;
	resize: vertical;
	vertical-align: bottom; // see listView demo

	&::placeholder {
		color: $input-placeholder-color;
	}

	&:focus {
		@include input-focus();
	}

	// keep this exactly here, do not move into .cui-input selector
	&.cui-input-shadow {
		position: absolute;
		display: block;
		padding: 0;
		border: none;
		top: -1000px;
		left: -1000px;
	}
}

input {
	height: $input-height;
	line-height: $input-height;

	&[type='file'] {
		height: auto;
		line-height: $line-height-base;
		padding: $input-padding-y;
		font-size: $font-size-sm;
	}
}

textarea {
	--textarea-min-rows: 1;

	resize: none; // todo: bad UI ?
	min-height: calc(#{$line-height-base} * 1em * var(--textarea-min-rows) + #{$spacer-xs} + 2px); // 16px: Line height, 6px: padding, 2px: border.
}


.cui-input {
	// state classes:
	// cui-input-invalid
	// cui-input-has-no-user-input
	// cui-input-has-user-input
	// cui-has-focus
	// cui-has-check-input
	//
	// hint:
	// cui-input-has-invalid-hint
	// cui-input-has-valid-hint
	// cui-input-has-input-hin:
	//

	&.cui-input-has-check-input {
		&.cui-input-invalid {
			input,
			.cui-data-field-right .cui-button .cui-button-visual {
				border-color: theme-color('danger');
				background: transparentize(theme-color('danger'), 0.85);
			}
		}
	}

	&.cui-maximize-vertical {
		display: flex;
		flex-direction: column;
	}

	// hint
	// + .cui-label {
	// 	@include form-hint();
	// }

	&-appearance-code {
		input,
		textarea {
			font-family: $font-family-monospace;
			font-size: $font-size-sm;
			color: $teal; // todo
			background: gray('900');
			border-color: gray('900');

			&:focus {
				border-color: gray('900');
			}
		}
	}
}

.cui-code-input pre {
	height: 400px;
	margin: auto;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
}

.cui-input-content-size {
	textarea {
		// min-height: 40px; // todo
		// height: 40px; // todo
		resize: none;
	}
}

// Multi input
.cui-multi-input .cui-multi-input-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: $input-min-width;
}

.cui-data-field-multi-input-center {
	flex: 1 1 auto;
}

.cui-data-field-multi-input-right {
	flex: 0 0 auto;
	vertical-align: top;
}

.cui-multi-input-input {
	position: relative;
	display: flex;
	max-width: 100%;
	border: 1px solid $input-border-color;
	border-radius: $input-border-radius;
	background-color: $input-background;

	+ .cui-multi-input-input {
		margin-top: $spacer-sm;
	}

	&:focus,
	&.cui-has-focus {
		@include input-focus();
	}

	&.cui-data-field-hidden {
		display: none !important;
	}

	.cui-input,
	.cui-textarea {
		width: 100% !important;
		border: none;
		border-radius: 0;
		min-width: 0; // so that the [DE | EN] doesn't move outside the input area

		@include disable-input-focus();
	}
}

.cui-multi-input-tag-button {
	@include input-control-button(22px, 18px);
}

// todo: test
.cui-browser-ie:not(.cui-browser-edge) {
	.cui-input {
		input,
		textarea {
			min-height: 24px;

			&[data-max-chars] {
				min-height: 22px;
			}
		}
	}

	.cui-multi-input-input {
		input,
		textarea {
			min-height: 22px;
		}
	}
}

// DateTime Input
.cui-date-time {
	.cui-input-invalid-hint {
		display: none;
	}

	.cui-input {
		min-width: 90px; // date-short
	}

	/*

	date: "dd, DD.MM.YYYY"
	date-short: "DD.MM.YYYY"
	date-time: "dd, DD.MM.YYYY HH:mm"
	date-time-short = "DD.MM.YYYY HH:mm"
	date-time-seconds: "dd, DD.MM.YYYY HH:mm:ss"
	date-time-seconds-short: "DD.MM.YYYY HH:mm:ss"

	*/

	&[data-cui-date-time-format='date'] .cui-input {
		min-width: 112px;
	}

	&[data-cui-date-time-format='date-time-short'] .cui-input {
		min-width: 129px;
	}

	&[data-cui-date-time-format='date-time'] .cui-input,
	&[data-cui-date-time-format='date-time-seconds-short'] .cui-input {
		min-width: 150px;
	}

	&[data-cui-date-time-format='date-time-seconds'] .cui-input {
		min-width: 175px;
	}
}

{'fraction_non_alphanumeric': 0.18525475463723878, 'fraction_numerical': 0.019722939657196525, 'mean_word_length': 2.9403330249768733, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '123031', 'n_tokens_mistral': 3935, 'n_tokens_neox': 3515, 'n_words': 639}