// https://material.io/components/text-fields
.custom-form-floating {
  >.form-control {
    &::placeholder {
      color: transparent;
    }

    &:focus,
    &:not(:placeholder-shown) {
      padding-top: $form-floating-input-padding-b;
      padding-bottom: $form-floating-input-padding-b;
    }

    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
    &:-webkit-autofill {
      padding-top: $form-floating-input-padding-b;
      padding-bottom: $form-floating-input-padding-b;
    }
  }

  >.form-control:focus,
  >.form-control:not(:placeholder-shown),
  >.form-select {
    ~label {
      background-color: $white;
      opacity: 1;
    }
  }

  @include floating-input-varient($custom-floating-input, $custom-floating-input-active, $custom-floating-input-padding-y, $custom-floating-input-padding-x, $custom-floating-input-height);
}

.custom-form-floating-sm {
  @include floating-input-varient($custom-floating-input-sm, $custom-floating-input-active-sm, $custom-floating-input-padding-y-sm, $custom-floating-input-padding-x-sm, $custom-floating-input-height-sm);
}

.custom-form-floating-lg {
  @include floating-input-varient($custom-floating-input-lg, $custom-floating-input-active-lg, $custom-floating-input-padding-y-lg, $custom-floating-input-padding-x-lg, $custom-floating-input-height-lg);
}

.custom-form-floating-flat {
  .form-control {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;

    &.is-valid,
    &.is-invalid {
      box-shadow: none;
    }
  }
}