.form-field {
  margin-bottom: 0.8em;

  &--space-y {
    margin-top: 2em;
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

.form-field--inline {
  display: inline-block;
  margin-bottom: 0;

  & + & {
    margin-left: 30px;
  }
}

.form-field__label {
  font-size: 13px;
  color: $colour-grey-dark;
  font-weight: $font-weight-semibold;
  display: block;
}

.form-field__focus-line {
  height: $input-border-width;
  width: 0;
  background: $colour-blue;
  margin: -$input-border-width auto 0;
  position: relative;
  transition: width 0.4s ease-out;

  .is-focused & {
    width: 100%;
  }
}

.form-field__msg {
  font-size: 13px;
  display: block;
  margin-top: 5px;

  .has-error &,
  .has-error + & {
    color: $colour-red;
  }
}

.form-field__msg--alt {
  text-transform: none;
}

.csstransforms.csstransitions .form-field.is-initialised {
  position: relative;
  padding-top: 1.8em;

  .form-field__label {
    pointer-events: none;
    position: absolute;
    font-size: 14px;
    line-height: $form-field-line-height;
    left: 0;
  }

  &.has-transitions {
    .form-field__label {
      transition: 0.3s ease;
    }
  }

  &.is-focused,
  &.is-dirty {
    .form-field__label {
      font-size: 13px;
      transform: translateY(-1.8em);
    }
  }

  &.is-focused {
    .form-field__label {
      color: $colour-blue;
    }
  }
}