/* ==========================================================================
   Styled Input Component
   Single source of truth for all text input styling.
   Apply .styled-input to <input> elements directly.
   ========================================================================== */

.styled-input {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-width: 2px 1px 1px 2px;
  border-style: solid;
  border-color: var(--np-color-outline);
  background: var(--np-color-surface);
  font-family: var(--font-primary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  color: var(--np-color-on-surface);
  box-sizing: border-box;
  outline: none;
}

.styled-input::placeholder {
  color: var(--np-color-tertiary);
}

.styled-input:focus {
  border-color: var(--np-color-on-surface);
}

.styled-input:disabled {
  border-width: 1px;
  color: var(--np-color-tertiary);
  cursor: default;
}

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

/* Remove default search input styling */
.styled-input::-webkit-search-decoration,
.styled-input::-webkit-search-cancel-button,
.styled-input::-webkit-search-results-button,
.styled-input::-webkit-search-results-decoration {
  display: none;
}