/*
Text input groups

Styles used to prepend or append information to an input

Markup:
<style>
div.form-element__input-group { margin-top: 10px; }
</style>
<div class="form-element__input-group">
    <div class="form-element__input-group-prepend">http://</div>
    <div class="form-element__input-group-input">
        <input type="text" class="form-element__input" placeholder="Placeholder text..."></input>
    </div>
</div>
<div class="form-element__input-group">
    <div class="form-element__input-group-input">
        <input type="text" class="form-element__input" placeholder="Placeholder text..."></input>
    </div>
    <div class="form-element__input-group-append">.com</div>
</div>
<div class="form-element__input-group">
    <div class="form-element__input-group-prepend form-element__input-group-prepend--action">
        <button class="btn btn--no-right-border-radius no-border">Action Button
            <span class="icon-link-menu-pointer"></span>
        </button>
    </div>
    <div class="form-element__input-group-input">
        <input type="text" class="form-element__input" placeholder="Placeholder text..."></input>
    </div>
</div>

Name: textInputGroup

Styleguide 3.2.1
*/

.form-element__input-group {
    display: flex;
}

.form-element__input-group-input {
    flex: 1 0 auto;
    .form-element__input{
        border-radius: 0 @border-radius-default @border-radius-default 0;
        
    }
    &:first-child {
        .form-element__input{
            border-radius: @border-radius-default 0 0 @border-radius-default;
        }
    }
}

.form-element__input-group-prepend,
.form-element__input-group-append {
    padding: 10px;
    background: @theme-grey1;
    border: 1px solid @theme-grey10;
    color: @theme-grey12;
}

.form-element__input-group-prepend {
    border-right: 0;
    border-radius: @border-radius-default 0 0 @border-radius-default;
}

.form-element__input-group-append {
    border-left: 0;
    border-radius: 0 @border-radius-default @border-radius-default 0;
}

.form-element__input-group-prepend--action,
.form-element__input-group-append--action {
    padding: 0;
}