/**
 * Input Component Styles
 *
 * Form input element with consistent styling and validation states.
 * Supports various input types with size variants and error handling.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   BASE INPUT STYLES
   ============================================ */

.hub-input {
  /* Display */
  display: inline-block;
  
  /* Sizing */
  width: auto;
  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);
  
  /* Transitions */
  transition: all var(--hub-transition-base, 0.3s ease);
  
  /* Remove browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

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

.hub-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-transparent-20);
}


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

.hub-input--small {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
}

.hub-input--medium {
  padding: 12px 16px;
  font-size: var(--font-size-sm);
}

.hub-input--large {
  padding: 16px 20px;
  font-size: var(--font-size-base);
}


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

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

.hub-input--error {
  border-color: var(--color-error);
}

.hub-input--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-light);
}

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


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

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