/************************************/
/*** Text-area                    ***/
/************************************/

text-area {
	display: grid !important;	/* There seems to be no other way to make the .text-area-input expand to 100% of the host's height. */
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	border: 1px solid var(--input-border-color);
	border-radius: var(--widget-border-radius);
	margin: 0.3em 0;
	overflow: hidden;
}

.text-area-input {
	display: block;
	width: 100%;
	height: 100%;
	cursor: text;
	white-space: pre-wrap;
	text-align: left;
	border-radius: var(--widget-border-radius);
	padding: 0.3em 0.5em 0.25em 0.5em;
	overflow: auto;
}

.text-area-input:not(.readonly) {
	font-family: var(--input-font-family);
	font-size: var(--input-font-size);
	line-height: var(--input-line-height);
	background: var(--input-backgnd);
}

.text-area-input.readonly {
	font-family: var(--global-font-family);
	font-size: var(--global-font-size);
	line-height: var(--global-line-height);
	background: var(--section-backgnd);
}

.text-area-input.readonly:focus {
	outline: none;
}

@media (max-width: 920px) {

	.text-area-input:not(.readonly) {
		font-size: calc(var(--input-font-size) * 0.75);
	}
	
	.text-area-input.readonly {
		font-size: calc(var(--global-font-size) * 0.75);
	}

}

@media (min-width: 921px) and (max-width: 1200px) {

	.text-area-input:not(.readonly) {
		font-size: calc(var(--input-font-size) * 0.9);
	}
	
	.text-area-input.readonly {
		font-size: calc(var(--global-font-size) * 0.9);
	}

}