.base-input__input {
  border: none;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 12px;
  outline: 1px solid var(--neutral-lighter);
  background-color: transparent;
  font-family: var(--primary-font);
  color: var(--neutral-medium);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.base-input__input::placeholder {
  color: var(--neutral-medium);
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.base-input__input:hover,
.base-input__input:focus {
  outline: 1px solid #dfe8f0;
}

.base-input__validation-message {
  font-size: 12px;
  line-height: 15px;
  color: #af0000;
}

.base-input__input-error,
.base-input__input-error:hover,
.base-input__input-error:focus {
  outline: 1px solid #af0000;
}

.base-input [type="hidden"] + .base-input__validation-message {
  display: none;
}