{#if label} {label} {#if required} * {/if} {/if}

</div>

{#if (error || helpText || showCharCount) && !disabled}
		<div class="textarea-footer">
			{#if error}
				<span class="textarea-error">{error}</span>
			{:else if helpText}
				<span class="textarea-help">{helpText}</span>
			{/if}

{#if showCharCount && maxLength}
				<span
					class="char-count"
					class:warning={charsRemaining < maxLength * 0.1}
					class:error={charsRemaining < 0}
				>
					{charsRemaining}
				</span>
			{/if}
		</div>
	{/if}
</div>

// Wrapper styles
	.textarea-wrapper {
		display: inline-block;
		position: relative;

&.full-width {
			display: block;
			width: 100%;
		}

&.has-error {
			.textarea {
				border-color: $red-50;

&:focus {
					border-color: $red-50;
				}
			}
		}

&.disabled {
			opacity: 0.6;
		}
	}

// Label styles
	.textarea-label {
		display: block;
		margin-bottom: $unit;
		font-size: 14px;
		font-weight: 500;
		color: $grey-20;

.required {
			color: $red-50;
			margin-left: 2px;
		}
	}

.textarea-container {
		position: relative;
		width: 100%;
	}

// Textarea styles
	.textarea {
		color: $input-text-color;
		width: 100%;
		font-family: inherit;
		border: 1px solid transparent;
		border-radius: $corner-radius-sm;
		background-color: $input-background-color;
		transition: all 0.15s ease;
		resize: vertical;

&:hover {
			background-color: $input-background-color-hover;
			color: $input-text-color-hover;
		}

&::placeholder {
			color: $grey-50;
		}

&:focus {
			outline: none;
			background-color: $input-background-color-hover;
			color: $input-text-color-hover;
		}

&:disabled {
			background-color: $grey-95;
			cursor: not-allowed;
			color: $grey-40;
			resize: none;
		}

&:read-only {
			background-color: $grey-97;
			cursor: default;
			resize: none;
		}
	}

// Size variations
	.textarea-small {
		padding: $unit calc($unit * 1.5);
		border-radius: $corner-radius-sm;
		font-size: 0.75rem;
	}

.textarea-medium {
		padding: calc($unit * 1.5) $unit-2x;
		border-radius: $corner-radius-md;
		font-size: 1rem;
	}

.textarea-large {
		padding: $unit-2x $unit-3x;
		border-radius: $corner-radius-lg;
		font-size: 1.25rem;
	}

.textarea-jumbo {
		padding: $unit-2x $unit-2x;
		border-radius: $corner-radius-2xl;
		font-size: 1.33rem;
	}

// Footer styles
	.textarea-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: $unit-half;
		min-height: 20px;
	}

.textarea-error {
		font-size: 13px;
		color: $red-50;
		flex: 1;
	}

.textarea-help {
		font-size: 13px;
		color: $grey-40;
		flex: 1;
	}

.char-count {
		font-size: 12px;
		color: $grey-40;
		margin-left: $unit;

&.warning {
			color: $yellow-50;
		}

&.error {
			color: $red-50;
		}
	}
</style>