Text input: visual design variants

:root {
  --example-form-input-border-width: 2px;
  --example-form-input-border-color: var(--nih-color-border-subtle, darkgray);
  --example-form-input-background: var(--nih-background-color-subtle, #EEE);
}

.example-form-input {
  background-color: transparent;
  color: var(--nih-text-color-neutral, black);
  padding-block-start: 0.5ex;
  padding-block-end: 0.5ex;
  padding-inline-start: 0.5ch;
  padding-inline-end: 0.5ch;
  font-size: calc(var(--nih-main-font-size) * 1.5);
}

Variant 1: full border

.example-form-input--border {
  border-style: solid;
  border-color: var(--example-form-input-border-color);
  border-width: var(--example-form-input-border-width);
}

Variant 2: underline

.example-form-input--underline {
  border-width: 0;
  border-bottom-width: 2px;
  border-color: var(--example-form-input-border-color);
}

Variant 3: flat

.example-form-input--flat {
  background: transparent;
  background-color: var(--example-form-input-background);
  color: var(--nih-text-color-neutral, black);
  border: 0;
}