<div class="m-form-group">
	<label class="m-form-group__label a-form-label" for="frm-pc-form-group">Text field</label>
	<input type="text" name="group" id="frm-pc-form-group" class="m-form-group__input a-form-input">
</div>

<hr>

<div class="m-form-group m-form-group--placeholder">
	<input type="text" onblur="this.setAttribute('value', this.value)" name="placeholder" id="frm-pc-form-placeholder" class="m-form-group__input a-form-input">
	<label class="m-form-group__label a-form-label" for="frm-pc-form-placeholder">Text field</label>
</div>

@import "atoms/form-input/index";

.m-form-group {

    $self: &;

    position: relative;

    + #{$self} {

        margin-top: space(2);

    }

    &--placeholder {

        @extend .a-form-input;
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        overflow: hidden;
        padding: 0;

        #{$self}__label {

            @extend .a-form-input;
            border: 0;
            cursor: text;
            flex: 0 0 auto;
            margin: 0;
            max-width: none;
            order: 1;
            width: auto;

            .js & {

                flex: 1 0 100%;
                max-width: 100%;
                width: 100%;

            }

        }

        #{$self}__input {

            border: 0;
            flex-basis: 0;
            flex-grow: 1;
            margin: 0;
            max-width: 100%;
            order: 2;

            .js & {

                flex-basis: initial;
                flex-grow: initial;
                max-width: initial;

            }

            &:focus,
            &[value] {

                + #{$self}__label {

                    flex-basis: auto; // for width transition use fix size - eg. 200px
                    width: auto;

                }

            }

            &[value=""] {

                &:not(:focus) {

                    + #{$self}__label {

                        flex-basis: 100%;
                        width: 100%;

                    }

                }

            }

        }

    }

}