/* wc.ui.textarea.scss */
@import 'mixins_common.scss';

// the ticker
textarea + output {
	@include border($color: $wc-ui-color-border-form-control);
	background-color: $wc-ui-color-disabled-bg;
	border-top: 0 none;
	color: $wc-ui-color-disabled-fg;
	display: block;
	margin-top: -$border-width;
	padding: $hgap-small;
	position: absolute;
	z-index: 5;

	&:before { // show the number of chars remaining
		content: attr(value);
		font-size: 85%;
	}
	&.wc_error { // show when the maxlength is exceeded
		color: $wc-ui-color-error-fg;
	}

	dialog & {
		z-index: 25;
	}
}


// A readonly textarea must preserve whitespace so uses a pre element (for IE compatibility) so we need to override PRE
// defaults and set whitespace and wrapping to textarea-like settings.
//scss-lint:disable QualifyingElement
pre.wc_ro {
	font-family: inherit;
	margin: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
}
/* end wc.ui.textarea.scss */
