@mixin shrinkLabel {
  top: -2.2rem;
  font-size: 1.4rem;
  color: var(--primaryColor);
}

.form-group {
  position: relative;
  margin-bottom: 2.5rem;

  &__input {
    background: none;
    background-color: white;
    color: var(--darkGrey);
    font-size: 1.8rem;
    padding: 1rem 1rem 1rem .5rem;
    display: block;
    width: 100%;
    border: none;
    border-radius: .7rem;
    padding-left: 1.5rem;
    border: 0.1rem solid var(--lightGrey);

    @media only screen and (min-width: 600px) {
      min-width: 40rem;
    }

    &:focus {
      outline-color: var(--primaryColor) !important;
      border-color: var(--primaryColor);
    }

    // margin: 2.5rem 0;
    &:focus~.form-group__input-label {
      @include shrinkLabel();
    }
  }

  &__input-label {
    color: var(--lightGrey);
    font-size: 1.6rem;
    font-weight: normal;
    position: absolute !important;
    pointer-events: none;
    left: 1.5rem;
    top: 1rem;
    transition: 300ms ease all;

    &.shrink {
      @include shrinkLabel();
    }
  }
}