Form Control: Invalid

.form-control,
.custom-form-control {
  @extend %heading-font-regular;

  display: block;

  width: 100%;
  padding: $spacer-xs;

  font-size: $font-size-base;
  line-height: $paragraph-line-height;

  transition: standard-transition(background-color);
}

.form-control {
  appearance: none;
  border: 2px solid $form-control-border-color;
  border-radius: 0;
  outline: none;
  caret-color: $form-control-caret-color;

  &::placeholder {
    color: $form-control-placeholder-color;
  }

  &:focus {
    color: $form-control-focus-color;
    background-color: $form-control-focus-bg;
  }

  &--invalid {
    border-color: $form-control-invalid-border-color;
  }
}

.custom-form-control {
  position: relative;
  min-height: ($paragraph-line-height * 1rem);
  transition: standard-transition(background-color, color, border-color);

  &.form-control--invalid,
  .form-group--invalid & {
    .form-label,
    .form-text {
      color: $form-control-invalid-border-color;
    }

    .form-label {
      &::before {
        border-color: $form-control-invalid-border-color;
      }
    }
  }

  // Hide the real input inside
  > .form-control__input {
    position: absolute;
    z-index: -1; // Put the input behind the label so it doesn't overlay text
    opacity: 0;
  }
}