/* -------------------------------------------------------- */
/* 🔹 Search Input                                          */
/* -------------------------------------------------------- */
/* Text field with search icon and conditional clear button  */
/* Mirrors search_input.dart                                 */

/* Uses .input-container from input_helpers.css for base     */
/* styling (surface, outline, radius-medium, font, color)    */

.search-input {
  display: flex;
  align-items: center;
  height: 48px;
  padding: var(--input-padding);
}

.search-input__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-left: var(--space-s);
  margin-right: var(--space-s);
  color: var(--color-on-surface-variant);
}

.search-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-height);
  color: var(--color-on-surface);
}

.search-input__field::placeholder {
  color: var(--color-on-surface-variant);
}

.search-input__clear {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-s);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: opacity 0.15s ease;
}

.search-input__clear svg {
  width: 20px;
  height: 20px;
}

.search-input__clear:hover {
  opacity: 0.7;
}

/* Show clear button when input has text (toggled via JS) */
.search-input--has-text .search-input__clear {
  display: flex;
}