.input {
  padding: 6px 16px;
  width: 100%;
  height: 35px;
  border: 1px solid var(--inputBorderColor);
  border-radius: 4px;
  background-color: var(--inputBackgroundColor);
  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
  color: var(--textColor);

  &:focus {
    outline: 0;
    border-color: var(--inputFocusBorderColor);
    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
  }
}

.hasError {
  border-color: var(--inputErrorBorderColor);
  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
}

.hasWarning {
  border-color: var(--inputWarningBorderColor);
  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
}

.hasButton {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}