@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as
	focusPlaceholders;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/4-elements/_global.elements.scss';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/7-overrides/_visibility.overrides.scss';

@use '../../styles/fieldsets.scss';
@use '../../styles/labels.scss';
@use '../../styles/text-inputs.scss';
@forward '../../utils/components/error-message/error-message';

$ontario-textarea-border-width: 0.125rem;

.ontario-textarea {
	border: globalVariables.$border-size-standard solid colours.$ontario-colour-black;
	border-radius: globalVariables.$global-radius;
	box-sizing: border-box;
	color: colours.$ontario-colour-black;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-family: fonts.$ontario-font-open-sans;
	line-height: globalVariables.$line-height-default;
	display: block;
	max-width: globalVariables.$standard-width;
	min-height: 144px;
	margin: spacing.$spacing-0;
	padding: 0.625rem spacing.$spacing-4;
	transition: focusPlaceholders.$ontario-focus-transition;
	white-space: pre-wrap;
	width: globalVariables.$full-width;

	&:focus,
	&:active {
		@extend %ontario-focus;
	}
}

.ontario-textarea.ontario-textarea-hint-expander--true {
	margin-bottom: spacing.$spacing-4;
}

.ontario-textarea--error {
	textarea {
		border: $ontario-textarea-border-width solid colours.$ontario-colour-alert;
	}
}