static get styles() {
      return [
        css`
          /**********************
            {block} .form-field
           ********************/

          :host {
            display: block;
          }

          :host([hidden]) {
            display: none;
          }

          :host([disabled]) {
            pointer-events: none;
          }

          :host([disabled]) .form-field__label ::slotted(*),
          :host([disabled]) .form-field__help-text ::slotted(*) {
            color: var(--disabled-text-color, #767676);
          }

          :host([label-sr-only]) .form-field__label {
            position: absolute;
            top: 0;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(100%);
            clip: rect(1px, 1px, 1px, 1px);
            white-space: nowrap;
            border: 0;
            margin: 0;
            padding: 0;
          }

          /***********************
            {block} .input-group
           *********************/

          .input-group__container {
            display: flex;
          }

          .input-group__input {
            flex: 1;
            display: flex;
          }

          /***** {state} :disabled *****/
          :host([disabled]) .input-group ::slotted([slot='input']) {
            color: var(--disabled-text-color, #767676);
          }

          /***********************
            {block} .form-control
           **********************/

          .input-group__container > .input-group__input ::slotted(.form-control) {
            flex: 1 1 auto;
            margin: 0; /* remove input margin in Safari */
            font-size: 100%; /* normalize default input font-size */
          }
        `,
      ];
    }
{block} .input-group

Structure:
- {element} .input-group__before (optional) : a prefix that resides outside the container
- {element} .input-group__container : an inner container: this element contains all styling
 - {element} .input-group__prefix (optional) : a prefix that resides in the container,
              allowing it to be detectable as a :first-child
 - {element} .input-group__input : a wrapper around the form-control component
  - {block} .form-control : the actual input element (input/select/textarea)
 - {element} .input-group__suffix (optional) : a suffix that resides inside the container,
              allowing it to be detectable as a :last-child
 - {element} .input-group__bottom (optional) : placeholder element for additional styling
              (like an animated line for material design input)
- {element} .input-group__after (optional) :  a suffix that resides outside the container