.input {
  background-color: var(--input-background, transparent);
  border-radius: var(--input-border-radius, 0.5em);
  border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
  color: var(--input-color, var(--color-ink));
  font-size: max(16px, 1em);
  line-height: inherit;
  max-width: 100%;
  padding: var(--input-padding, 0.5em 0.8em);
  width: 100%;
}

.input:focus {
  --input-border-color: var(--color-link);
  --focus-ring-offset: -1px;
}

.input[readonly] {
  --focus-ring-size: 0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea */
textarea.input {
  min-height: calc(3 * 1.5em + (2 * var(--input-padding)));
  resize: vertical;
}

/* Select */
select.input {
  --input-border-radius: 2em;
  --input-padding: 0.5em 2em 0.5em 1em;

  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23666'/%3E%3C/svg%3E");
  background-size: 0.6em;
  background-position: center right 0.8em;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  select.input {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23999'/%3E%3C/svg%3E");
  }
}

/* Checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-link);
  cursor: pointer;
  height: 1.2em;
  width: 1.2em;
}

/* File input */
input[type="file"] {
  cursor: pointer;
  font-size: 0.875rem;
}

/* Labels */
label {
  color: var(--color-ink);
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Form groups */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  margin-bottom: 0.5rem;
}

.form-group .input {
  width: 100%;
}

/* Field errors */
.field-error {
  color: var(--color-negative);
  font-size: var(--text-small);
  margin-top: 0.25rem;
}