/**
 * Textarea Component Styles
 *
 * Multi-line text input element with consistent styling and validation states.
 * Supports configurable rows, resizing, and error handling.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   BASE TEXTAREA STYLES
   ============================================ */

.hub-textarea {
  /* Display */
  display: inline-block;
  
  /* Sizing */
  width: auto;
  min-height: 160px;
  padding: 12px 16px;
  
  /* Typography */
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  
  /* Appearance */
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  
  /* Resizing */
  resize: vertical;
  
  /* Transitions */
  transition: all var(--hub-transition-base, 0.3s ease);
  
  /* Remove browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hub-textarea::placeholder {
  color: var(--color-gray-400);
}

.hub-textarea:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}

.hub-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 149, 156, 0.2);
}


/* ============================================
   SIZE VARIANTS
   ============================================ */

.hub-textarea--small {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  min-height: 120px;
}

.hub-textarea--medium {
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  min-height: 160px;
}

.hub-textarea--large {
  padding: 16px 20px;
  font-size: var(--font-size-base);
  min-height: 200px;
}


/* ============================================
   MODIFIERS
   ============================================ */

.hub-textarea--full-width {
  width: 100%;
}

.hub-textarea--error {
  border-color: #ef4444;
}

.hub-textarea--error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.hub-textarea--disabled,
.hub-textarea:disabled {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  opacity: 0.6;
}

.hub-textarea--no-resize {
  resize: none;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Make textareas slightly larger on mobile for better touch targets */
  .hub-textarea {
    padding: 14px 16px;
    font-size: var(--font-size-base); /* Prevents zoom on iOS */
  }
  
  .hub-textarea--small {
    padding: 10px 12px;
    font-size: var(--font-size-sm);
  }
}