Utility helper built to enable the styling of one of the most complex ecosystems in web development at a glance.

In this mixin, style parameters are declared as null so as to make their redeclaration as scoped property-value pair arguments possible for the sake of readability.

The idea was to establish two primary logical states (each further divided into smaller steps) for <form> elements:

1. Initial/final state (when the element is untouched or complete).
2. Transformed state (when the element is interacted with).

Here's the overall animation process:

1. Sets element's initial state (color, background-color, border).
2. :hover and :active (click) states trigger minor transition effects (such as cursor or opacity).
3. :focus state changes main properties (color, background-color).
4. Upon typing or selecting an <option>, border-color and box-shadow become active.
5. Once value is properly filled and :focus state is removed, most styles return to their initial state.

NOTE: You can start from step 3 (using the initial palette) by adding the .label-placeholder class together with .form-control.

The .input_spacing class is designed to regulate the global spacing between individual <form> elements and it should be placed on an independent (meaning either one level above or instead of .form-floating) outer wrapper for each input-like block to ensure proper functionality.