@import '../../../styles/definitions/placeholders';
@import "../../../styles/definitions/forms";

.textarea {
	&_text {
		&--hidden {
			@extend %sr-only;
		}
		&:not(&--hidden) {
            @extend %form-label;
		}
	}

	&_textarea-wrapper {
		position: relative;
	}

	&_control {
		@extend %form-control;
		padding-top: $form-control-padding-y;
		padding-bottom: 32px; // More bottom padding for character count row
		padding-right: $form-control-padding-x; // Normal right padding
		max-width: 100%;
		height: 200px;
		min-height: 75px;
		resize: vertical;

		&--with-errors {
			border-color: $form-error-color;
		}
	}

	&_character-count {
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: $form-control-padding-x;
		font-size: 14px; // Larger font size
		color: $deep-gray;
		pointer-events: none; // Don't interfere with textarea interaction

		&--error {
			color: $form-error-color;
		}
	}

	&_error {
		@extend %input-error;
	}
}