.ccl-textarea-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ccl-textarea {
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--motion-fast);
  background-color: var(--color-background-default, #ffffff);
  color: var(--color-text, #333);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;

  &:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
  }

  &:disabled {
    background-color: var(--color-background-surface);
    color: var(--color-text-disabled, #9ca3af);
    cursor: not-allowed;
    opacity: 0.7;
  }

  &:read-only {
    background-color: var(--color-background-surface);
    cursor: default;
  }

  &[aria-invalid='true'] {
    border-color: var(--color-error-500);
  }

  &::placeholder {
    color: var(--color-muted, #999);
    opacity: 1;
  }
}

.ccl-textarea__helper {
  font-size: var(--typography-font-size-sm);
  color: var(--color-success-500);
}

.ccl-textarea__error {
  font-size: var(--typography-font-size-sm);
  color: var(--color-error-500);
}

/* Resize variants */
.ccl-textarea[style*="resize: none"] {
  resize: none;
}

.ccl-textarea[style*="resize: both"] {
  resize: both;
}

.ccl-textarea[style*="resize: horizontal"] {
  resize: horizontal;
}

.ccl-textarea[style*="resize: vertical"] {
  resize: vertical;
}

/* Focus styles for better accessibility */
.ccl-textarea:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ccl-textarea {
    font-size: var(--typography-font-size-sm);
    padding: var(--spacing-sm);
    min-height: 60px;
  }
}