/* ============================================================
 *  Peerly — Inputs
 *  v8.1.0 — radius généreux
 * ============================================================ */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"] {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-4);
  background: var(--md-surface-container);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  outline: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  caret-color: var(--md-primary);
}
input::placeholder {
  color: var(--md-outline);
}
input:hover:not(:disabled) {
  background: var(--md-surface-container-high);
}
input:focus {
  background: var(--md-surface-container-high);
  border-color: var(--md-primary);
}

input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}