input {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .1), 0 0 0 transparent;
  border: 0;
  border-radius: 0;
  background-color: #f3f7f7;
  color: #0e141e;
  height: 36px;
  outline: none;
  font-size: 14px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.1s ease-in-out;

  &.success,
  &.error {
    border-width: 1px;
    border-style: solid;
  }

  &.outlined {
    border: 2px solid #8b98af;
    border-radius: 2px;
  }

  &.success {
    border-color: var(--success-color);
  }

  &.error {
    border-color: var(--error-color);
  }

  &.large {
    height: 40px;
    font-size: 16px;
  }

  &.white {
    background: white;
  }

  &:focus {
    border-bottom: 2px solid #2e4163;
  }

  &[type=radio],
  &[type=checkbox] {
    height: auto;
  }

}

select {
  height: 32px;
  min-width: 112px;

  &:focus {
    outline: var(--primary-color);
    border-color: var(--primary-color);
  }
}

.form-hint {
  margin-bottom: 8px;
  line-height: 12px;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-size: 12px;
  color: rgba(0,0,0,.6);
  margin-left: 4px;
}

.success-text {
  color: var(--success-color);
  @extend .slide-up-fade-in;
}

.error-text {
  color: var(--error-color);
  @extend .slide-up-fade-in;
}