TASK: Better form-input-wrapper

        <div class="metadata">

          <slot name="metadata"/>

        </div>

        <div class="content">

          <slot name="before"/>

          <slot/>

          <slot name="after"/>

        </div>

      </div>

    );

  }

  .label-wrapper {

    flex: 1;

    flex-wrap: wrap;

  }

  .metadata {

    margin-left: auto;

  }

  .content {

    display: flex;

    align-items: center;

    flex: 1 0 100%;

  }

}

    return (

      <label>

        <neos-form-input-wrapper label={this.label}>

          <slot name="metadata"/>

        </neos-form-input-wrapper>

        <div class="input">

          <slot name="metadata" slot="metadata"/>

          <slot name="before"/>

          <input

            ref={input => this.nativeInput = input as any}

            onKeyDown={this.inputKeydown.bind(this)}

          />

          <slot name="after"/>

        </div>

        </neos-form-input-wrapper>

      </label>

    );

  }

input {

  background-color: $background-dark-color;

  border: 0;

  outline: 1px solid neos-color($colors-dark, 'darker');

  outline: 1px solid transparent;

  outline-offset: 0;

  box-sizing: content-box;

  color: inherit;

  &:focus:enabled,

  &:hover:enabled {

    outline: 1px solid neos-color($colors-dark, 'primary');

    outline: 2px solid neos-color($colors-dark, 'primary');

    outline-offset: -2px;

  }

  &:focus:enabled {

  height: $grid-unit;

  line-height: $grid-unit;

  transition: all ease-in 100ms;

  transition: all ease-in 180ms;

}

.input {