label.text-input-field {
  border: solid 3px transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: flex-start;
  margin: 1rem auto;
  width: 100%;

  span {
    display: block;
    margin-bottom: 10px;
    text-transform: capitalize;
    margin-right: 25px;
    text-align: left;
    text-shadow: 0 0 5px rgb(255, 255, 255);
    font-family: 'Montserrat', sans-serif;
    color: $grey_darkest;
    font-size: $base_font_size;
    font-weight: 400;
  }

  input[type='text'],
  input[type='password'],
  input[type='number'],
  input[type='tel'] {
    width: 100%;
    @include focusable();
    font-size: $base_font_size;
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    height: 2.8rem;
    outline: none;
    background-color: $white;

    &[disabled] {
      background-color: #eff3f6;
    }

    &:focus {
      background-color: white;
    }

    &.has-errors {
      border: solid 3px rgba($error, 0.5);
      background-color: rgba($error, 0.2);
    }
  }

  &:focus {
    outline: none;

    input[type='text'],
    input[type='password'],
    input[type='number'],
    input[type='tel'] {
      box-shadow: $focus_border;
    }
  }
}
