@import './config';
@import '../../mixins';

.FormGroup {
  position: relative;
  display: block;
  margin: $form-group-margin;
}

.FormGroup--inline {
  display: inline-block;
}

.FormGroup-hint {
  margin: 0;
  font-size: $form-group-hint-font-size;
  font-weight: $form-group-hint-font-weight;
  line-height: $form-group-hint-line-height;
  color: $form-group-hint-color;

  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);

  will-change: transform, opacity, max-height, margin;
  transition: 200ms all;

  .FormGroup.is-focused & {
    max-height: 100px;
    margin: $form-group-hint-margin;
    opacity: 1;
    transform: translateY(0);
  }
}

.FormGroup-feedback {
  display: none;
  margin: $form-group-feedback-margin;
  font-size: $form-group-feedback-font-size;
  font-weight: $form-group-feedback-font-weight;
  color: $form-group-feedback-color;
  font-size: $form-group-feedback-font-size;
  line-height: $form-group-feedback-line-height;

  animation-name: slideInUp;
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  @include state-variation(error) {
    display: block;
    color: $color-danger;
  }

  @include state-variation(success) {
    display: block;
    color: $color-success;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}