label {
  display: block;
  margin-block-end: var(--space-1);
  font-weight: 600;
}

input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  inline-size: 100%;
  max-inline-size: 32rem;
  min-block-size: var(--control-size);
  border: var(--edge) solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-2);

  &[aria-invalid="true"] {
    border-color: var(--error);
  }

  &:disabled {
    color: var(--muted);
    cursor: default;
  }
}

.field-error {
  color: var(--error);
  margin-block: var(--space-1);
}

/* A label beside its checkbox. */
.inline-label {
  display: inline;
  margin-inline-start: var(--space-1);
}

/* The weekly email's day and time, side by side where they fit. */
.schedule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-2);
}