.form-input {
  &-label {
    @apply block mb-2;
    &--required {
      &:after {
        content: '*';
        @apply pl-0.5;
      }
    }
  }

  &-text {
    height: $formInputHeight;
    @apply appearance-none;
    @apply border;
    @apply transition-colors duration-500;
    @apply block px-3 py-2;
    @apply focus:outline-none;

    &area {
      height: auto;
    }
  }

  &-wrap {
    @apply mb-6 relative;
  }

  &-action {
    @apply cursor-pointer select-none inline-flex items-center justify-start absolute right-0 top-1;
    @apply transition-all duration-500;
  }

}

.form-validation-error {
  @apply absolute top-full right-0;
}

.form-title {
  @extend .form-input-wrap;

  &--required {
    &:after {
      content: '*';
      @apply pl-0.5;
    }
  }

  &-h1 {
    @apply text-2xl;
  }

  &-h2 {
    @apply text-xl;
  }

  &-h3 {
    @apply text-lg;
  }

  &-h4 {
    @apply text-base;
  }

  &-h5 {
    @apply text-sm;
  }

  &-h6 {
    @apply text-xs;
  }
}

.form-separator {
  @extend .form-input-wrap;

  &--symmetric {
    @apply mt-6;
  }

  &-h1 {
    @apply border-b;
  }

  &-h2 {
    @apply border-b-2;
  }

  &-h3 {
    @apply border-b-4;
  }
}

.form-progress {
  @apply transition-all duration-500;
  &--in {
    @apply pointer-events-none cursor-not-allowed opacity-75;
  }
}