/**
 * TextInput Component Styles
 * Following UI Library 2.0 design tokens
 */

@import url('../../01-core/design-tokens-core.css');

/* ========================================
   TEXT INPUT
   ======================================== */

.text-input {
  width: 100%;
  padding: 10px var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background);
  box-shadow: var(--shadow-border);
  box-sizing: border-box;
  transition: box-shadow var(--transition-fast);
}

.text-input:hover {
  background: var(--color-background-hover);
  box-shadow: var(--shadow-border-hover);
}

/* Keep hover state when hovering toggle button (password show/hide) */
/* When toggle button (sibling after input) is hovered, keep input hover state */
/* BUT: Don't override focus state - focus takes priority */
.text-input:not(:focus):has(~ .input-toggle-button:hover) {
  background: var(--color-background-hover);
  box-shadow: var(--shadow-border-hover);
}

.text-input:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.text-input.invalid {
  box-shadow: var(--shadow-invalid);
}

.text-input.invalid:focus {
  box-shadow: var(--shadow-invalid-focus);
}

.text-input.valid {
  box-shadow: var(--shadow-valid);
}

.text-input.valid:focus {
  box-shadow: var(--shadow-valid-focus);
}

.text-input:disabled {
  background: var(--color-background-secondary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  user-select: none; /* Prevent text selection in disabled state */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.text-input.input-readonly,
.text-input.input-readonly:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-style: italic;
  cursor: text; /* Allow text selection cursor in readonly mode */
  box-shadow: var(--shadow-border);
  user-select: text; /* Explicitly enable text selection */
  pointer-events: auto; /* Ensure input receives mouse events for selection */
  -webkit-user-select: text; /* Safari support for text selection */
  -moz-user-select: text; /* Firefox support for text selection */
  -ms-user-select: text; /* IE/Edge support for text selection */
}

.text-input::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
  opacity: 1;
}

/* Textarea-specific styles */
textarea.text-input {
  resize: vertical; /* Only allow vertical resizing */
  min-height: 80px; /* Minimum height for usability */
}

/* ========================================