/* Shared form-control contract. Plugin integrations should only adapt markup. */
:where(body) :where(input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--nidoo-border);
  border-radius: var(--nidoo-radius-md);
  background: var(--nidoo-surface);
  color: var(--nidoo-text);
  font: 400 var(--nidoo-font-size-sm)/1.4 var(--nidoo-font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(body) :where(input, select, textarea):focus {
  border-color: var(--nidoo-primary);
  box-shadow: var(--nidoo-focus-ring);
  outline: none;
}

:where(body) :where(input::placeholder, textarea::placeholder) {
  color: var(--nidoo-text-muted);
  opacity: 0.75;
}

:where(body) :where(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  min-height: auto;
  accent-color: var(--nidoo-primary);
}

label {
  color: var(--nidoo-text);
  font-size: var(--nidoo-font-size-sm);
}