.vuiInput {
  appearance: none;
  border-radius: $sizeXxs;
  border: 1px solid var(--vui-color-medium-shade);
  background-color: var(--vui-color-empty-shade);
}

.vuiInput--s {
  padding: $sizeXs * 0.75 $sizeS;
  font-size: $fontSizeSmall;
}

.vuiInput--m {
  padding: $sizeXs $sizeM;
  font-size: $fontSizeStandard;
}

.vuiInput--l {
  padding: $sizeS $sizeM;
  font-size: $fontSizeLarge;
}

.vuiInput--fullWidth {
  width: 100%;
}

.vuiInput-isSelected {
  // Deliberate no-op. An input might be selected if it's provided as the
  // trigger element to a Popover, but selected states don't apply to inputs.
}

.vuiInput-isInvalid {
  border-color: var(--vui-color-danger-shade);
}