/* =============================== */
/* CSS for control sap.m/TextArea  */
/* Base theme                      */
/* =============================== */

@_sapMTextAreaPadding: 0.625rem 0.75rem;
@_sapMTextAreaPadding_Compact: 0.1875rem 0.5rem;
@_sapMTextAreaValueStatePadding: 0.5625rem 0.6875rem;
@_sapMTextAreaValueStatePadding_Compact: 0.125rem 0.4375rem;

/* uses sapMInputBase styles */

.sapMTextAreaInner {
	overflow: auto; /* remove scrollbars if not needed */
	-webkit-transform: none; /* transform is blocking scroll */
	resize: none;
	margin: 0;
}

.sapMTextArea .sapMInputBaseContentWrapper {
	-webkit-overflow-scrolling: touch;
	height: 100%;
	width: 100%;
	line-height: 0;
	display: block;
}

.sapMTextArea .sapMTextAreaInner {
	-webkit-overflow-scrolling: touch;
	line-height: 1.4;
	height: 100%;
	width: 100%;
}

.sapMTextAreaWithCounter {
	& .sapMTextAreaCounter {
		float:right;
		overflow: hidden;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontSmallSize;
		color: @sapUiContentLabelColor;
		padding: 0.3725rem 0.125rem 0.5rem;
	}

	& .sapMInputBaseContentWrapper {
		height: calc(~"100% - 1.5rem");
	}
}

.sapMTextAreaGrow {
	overflow: hidden;
	position: absolute;
	height: 100%;
	top: 0;
}

/* ensure that the mirror div has the same styles like the inner text area */
.sapMTextAreaMirror {
	/* should not grow more than screen size */
	max-height: calc(100vh - 6rem);
	white-space: pre-wrap;
	border: none;
	overflow: hidden;
	line-height: 1.4;
	visibility: hidden;
	word-break: break-word;
	font-size: @sapFontSize;
	padding: @_sapMTextAreaPadding;
}

.sapMInputBase.sapMTextArea {
	height: auto;
	min-height: 2.5rem;
	min-width: 6rem;

	.sapMTextAreaInner {
		line-height: 1.4;
		padding: @_sapMTextAreaPadding;
		-webkit-overflow-scrolling: touch; /* IOS only */
	}
}

.sapMInputBase.sapMTextArea .sapMInputBaseContentWrapperState {
	.sapMTextAreaInner, .sapMTextAreaMirror {
		padding: @_sapMTextAreaValueStatePadding;
	}
}

.sapMFocus.sapMTextArea {
	& .sapMInputBaseContentWrapper {
		outline: none;

		.sapMInputBaseInner {
			outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
			outline-offset: -2px;
		}
	}
}

/**** Compact Size ****/
.sapUiSizeCompact {
	.sapMInputBase.sapMTextArea {
		min-height: 1.625rem;
		margin: 0.1875rem 0;
	}

	.sapMTextAreaWithCounter {
		& .sapMTextAreaCounter {
			padding-top: 0.3125rem;
		}
	}
}

.sapUiSizeCompact .sapMInputBase.sapMTextArea {
	.sapMTextAreaInner, .sapMTextAreaMirror {
		padding: @_sapMTextAreaPadding_Compact;
	}
	.sapMInputBaseContentWrapperState {
		.sapMTextAreaInner, .sapMTextAreaMirror {
			padding: @_sapMTextAreaValueStatePadding_Compact;
		}
	}
}

/**
	Fix for iOS. When growing is enabled, the mirrored, hidden content should have pixel perfect proportions
	as the textarea. Otherwise, words could break differently and this would lead to inconsistent height.
	For some reason iOS devices need wider padding on left & right in order to have this consistency.
 */
html.sap-tablet, html.sap-phone {
	&[data-sap-ui-os*="iOS"] .sapMInputBase.sapMTextArea .sapMTextAreaMirror {
		padding-left: 15px;
		padding-right: 15px;
	}
}

html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea .sapMInputBaseContentWrapper ::-webkit-scrollbar {
	background: @sapUiFieldBackgroundStyle;
	background-color: @sapUiScrollBarTrackColor;
}

html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea {
	.sapMInputBaseContentWrapperWarning ::-webkit-scrollbar {
		background: @sapUiFieldWarningBackgroundStyle;
		background-color: @sapUiScrollBarTrackColor;
	}

	.sapMInputBaseContentWrapperError ::-webkit-scrollbar {
		background: @sapUiFieldInvalidBackgroundStyle;
		background-color: @sapUiScrollBarTrackColor;
	}

	.sapMInputBaseContentWrapperInformation ::-webkit-scrollbar {
		background: @sapUiFieldInformationBackgroundStyle;
		background-color: @sapUiScrollBarTrackColor;
	}

	.sapMInputBaseContentWrapperSuccess ::-webkit-scrollbar {
		background: @sapUiFieldSuccessBackgroundStyle;
		background-color: @sapUiScrollBarTrackColor;
	}

	.sapMInputBaseReadonlyWrapper ::-webkit-scrollbar {
		background: @sapField_ReadOnly_BackgroundStyle;
		background-color: @sapUiScrollBarTrackColor;
	}
}